使用jQuery Image Gallery淡入淡出

Question

我制作了这个简单的jQuery图片库http://jsfiddle.net/RVermeulen/XNsHC/3/

但是我无法在其中制作出漂亮的fadeOut和In，因为如果我这样做（使用fadeOut和In）：

$(document).ready(function() {

    $(".small_image").click(function() {
        event.preventDefault();
        var image = $(this).attr("rel");
        $('#current_image').fadeOut(300);
        $('#current_image').html('<img width="370" src="' + image + '"/>');
        $('#current_image').fadeIn(300);
    });

});

看起来.html函数加载速度比FadeIn快，所以它没有“平滑”淡入淡出。有没有人知道如何解决这个延迟或什么？

Answer 1

在图像淡出后，您需要使用complete callback更改图像：

$(".small_image").click(function () {
    event.preventDefault();
    var image = $(this).attr("rel");
    $('#current_image').fadeOut(300, function() {
        $('#current_image').html('<img width="370" src="' + image + '"/>');
        $('#current_image').fadeIn(300);
    });
});

jsFiddle example

Answer 2

这是你在找什么？

<强> FIDDLE

$(document).ready(function () {
    $(".small_image").click(function () {
        event.preventDefault();
        var image = $(this).prop("rel");
        $('#under').prop('src', image);
        $('#above').fadeOut(600, function () {
            $('#above').prop('src', $('#under').prop('src')).css('display', 'block');
        });
    });
});