ein Bild größer auf Klick, und zurück zu klein auf zweiten Klick

Question

Ich habe diese Jquery gemacht, die alle meine IMG größer machen, wenn ich einen Knopf klicke, aber ich weiß nicht, wie man sie wieder auf die Originalgröße zurückgehen lassen i klicken Sie die gleiche Taste erneut: P

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $("#changesize").click(function(){ 
         $("img").animate({ 
          height: "500px", 
          width: "500px" 
         },50); 
      }); 
    }); 
</script> 

Answer 1

es gibt einige Möglichkeiten, es mit jQuery zu tun ist, können Sie es tun mit wie folgt aus:

$(document).ready(function() { 
 
     var small={width: "200px",height: "116px"}; 
 
     var large={width: "400px",height: "232px"}; 
 
     var count=1; 
 
     $("#imgtab").css(small).on('click',function() { 
 
      $(this).animate((count==1)?large:small); 
 
      count = 1-count; 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="imgtab" class='small' src="http://www.stories4kid.com/313667_195.jpg">

Sie können auch toggleClass (info here) verwenden, es ist auch eine gute Option.

Beispiel:

$('#imgtab').on('click', function(e) { 
 
    $(this).toggleClass('fullSize'); 
 
});

img { 
 
    height: 200px; 
 
    width: 116px; 
 
    -webkit-transition: all .4s ease-in; 
 
} 
 

 
.fullSize { 
 
    height: 250px; 
 
    width: 232px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="imgtab" src="http://www.stories4kid.com/313667_195.jpg">

Answer 2

Hier ist es ... :)

$(document).ready(function() { 
 
     var small={width: "200px",height: "116px"}; 
 
     var large={width: "400px",height: "232px"}; 
 
     var count=1; 
 

 
     $("#button").on('click',function() { 
 
      $(imgtab).animate((count==1)?large:small); 
 
      count = 1-count; 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="imgtab" class='small' src="http://www.stories4kid.com/313667_195.jpg" style=width:100px;height:100px> 
 

 
<button id='button'> 
 
click me 
 
</button>