Raphael Bergeron Raphael Bergeron - 6 months ago 11
Javascript Question

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

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

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

Comments