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