1

我正在尝试从我的一个 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>
4

2 回答 2

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

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

小提琴

于 2013-04-30T22:24:10.483 回答
0

一些事情。

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

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

尝试这个：

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

演示

于 2013-04-30T22:19:52.000 回答