Question

我正在制作一个包含缩略图的图库。它可以工作，但我希望进行图像转换，我希望它可以淡入。在这种情况下，它会淡入但仅适用于第一个图像。下一个图像显示没有任何动画。

$('.picture').click(function() {
    $("#screen img").attr('src', $(this).attr('src')).animate({
        height: "400px"
    }, 2000);
});

而且，有人可以告诉我如何使用div和图像的宽度和高度将div中的图像定位在中心位置？我不想在画廊中使用插件，所以我非常感谢你的帮助。

Answer 1

要保持当前的转换，请尝试

var $simg = $("#screen img");
$('.picture').click(function () {
    var $img = $(this);
    if ($simg.height() == 0) {
        $("#screen img").attr('src', $(this).attr('src')).animate({
            height: "400px"
        }, 2000);
    } else {
        $("#screen img").animate({
            height: "0"
        }, function () {
            $(this).attr('src', $img.attr('src')).animate({
                height: "400px"
            }, 2000)
        });
    }
});

演示：Fiddle，using fade animation

如何在每次点击时开始动画

1 个答案: