使用jQuery图片廊淡入淡出(Fade in and out with jQuery Image

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

但我不能做一个很好的淡出，并在它，因为如果我这样做（与淡出，并在它）：

$(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的功能负载比淡入一样快，所以它是没有“平稳”褪色。 有谁知道如何与延迟或什么解决这一问题？

Answer 1:

您需要使用完整的回调来改变图像的图像淡出后 ：

$(".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

Answer 2:

难道这就是你要找的人？

小提琴

$(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');
        });
    });
});

文章来源: Fade in and out with jQuery Image Gallery