make an image bigger on click, and go back to small on second clic

Question

I have made this jquery wich make all my img bigger when I clic a button, but I dont know how to make them go back to the original size when i click that same button again:P

<script type="text/javascript">

     $(document).ready(function(){

            $("#changesize").click(function(){

                         $("img").animate({

                             height: "500px",

                             width:  "500px"

                         },50);

            });

     });

</script>

Answer 1

There is some ways to do it with jQuery, you can do it with like this:

$(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">

You can also use toggleClass (info here) it is good option too.

example:

$('#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">

make an image bigger on click, and go back to small on second clic

Sign up