Javascript 如何在每次单击时启动动画

我正在用缩略图制作一个画廊。它可以工作，但我想做一个图像转换，我想它淡入淡出。在这种情况下，它会淡入，但仅对第一个图像淡入。接下来的图像显示时没有任何动画

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

---

还有，有人能告诉我如何使用div和图像的宽度和高度将图像放置在div的中心位置吗？我不想在图库中使用插件，因此我非常感谢您的帮助。

要保持当前的过渡，请尝试

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

---

演示：，

您能创建一个JSFIDLE吗？我们不能只用javascript代码做很多事情。这是一个JSFIDLE，但我不知道为什么它在这里不起作用，它在我的程序中起作用..你不需要jquery库，这就是它不起作用的原因。谢谢，它工作得很好！顺便问一下，我可以将div中心的图片与动画对齐吗？如果它是关于不同宽度和高度的图片，它能以某种方式完成吗？