使用 jQuery Image Gallery 淡入淡出答案

【问题标题】：Fade in and out with jQuery Image Gallery使用 jQuery Image Gallery 淡入淡出
【发布时间】：2013-08-14 04:50:53
【问题描述】：

我制作了这个简单的 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 快，所以它不是“平滑”的淡入淡出。有谁知道如何通过延迟或其他方式解决此问题？

【问题讨论】：

标签： jquery fadein fadeout image-gallery

【解决方案1】：

这是你要找的吗？

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

【讨论】：

【解决方案2】：

你需要使用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

【讨论】：