点击放大图片，第二次点击变小

Question

我做了这个jQuery，当我点击一个按钮时，我的所有图像都会变大，但我不知道如何在我再次点击同一个按钮时让它们恢复到原来的大小。

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

Answer 1

有一些方法可以用 jQuery 做到这一点，你可以这样做：

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

你也可以使用toggleClass (info here) 也是不错的选择。

示例：

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

在这里...:)

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

点击放大图片，第二次点击变小

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

jquery

resize