Question

我正在尝试从我的一个Div中调整图像大小，但它们最终都会调整大小但不按顺序。

我如何确保他们单独进行？另外，如果点击图片，我该怎么做才能达到原来的大小？

这是我的HTML：

<img class="i1" border="0" src="Main Picture Gallery/1.JPG" alt="Edge Hill near lake" width="204" height="153" />
<img class="i2" border="0" src="Main Picture Gallery/2.JPG" alt="Edge hill libary" width="204" height="153" />

这是我的jQuery：

<script src="jquery.js"> </script>
<script>    
$(document).click(function() {
    $(".i1, .i2").animate({height:'612'})
    $(".i1, .i2").animate({width:'816'})
});         
</script>

Answer 1

$(function() {
    $(".i1, .i2").on('click', function() {

        var h = $(this).height();
        $(this).animate({
            height: (h < 600 ? 612 : 153), 
            width : (h < 600 ? 816 : 204)
        });
    });
});

FIDDLE

Answer 2

很少。

首先，您将click附加到document，它应该是$(".il, .i2").click。

接下来，为了单独为它们设置动画，请使用animate的回调函数，以确保在另一个启动之前已完成。

试试这个：

$(".i1, .i2").click(function() {
    $(".i1").animate({height:'612', width: '816'}, 1000, function () {
        $(".i2").animate({height:'612', width: '816'});
    });
});

DEMO

jQuery动画调整大小点击？

2 个答案: