Question

当我点击一个按钮时，我已经制作了这个jquery让我所有的img更大，但我不知道当我再次点击同一个按钮时如何让它们恢复到原来的大小：P

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

Answer 1

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

＆＃13;

$(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;
        });
    });

＆＃13;

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

＆＃13;

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

在点击时使图像更大，并在第二个clic上返回小图像

2 个答案: