JQuery 淡出(函数(){fadeIn});答案

【问题标题】：JQuery fadeOut(function(){fadeIn});JQuery 淡出(函数(){fadeIn});
【发布时间】：2013-07-23 19:26:38
【问题描述】：

我的网页有问题。我有 4 个 div，它们都应该在前一个淡出之后全部淡入。我使用的代码是：

$('.btn').click(function(){
    $('#box3').delay(5000).fadeOut('slow', function(){
        $('#box4').fadeIn('slow');
    });
});

#box1 > #box2 有效，#box2 > #box3 有效，但是当我尝试从#box3 > #box4 开始时，有时#box3 会淡出然后用#box4 淡入。我不知道它为什么这样做。

谢谢，

http://jsfiddle.net/chLRa/4/ 正在工作。有时从 3 到 4 时，它仍然会在 3 和 4 中消失

【问题讨论】：

显示一些 HTML 或将其放入小提琴中。 jsfiddle.net
这些元素可能有问题，因此将代码放入 jsfiddle 会有所帮助
您的 jsfiddle 不起作用，这无助于解释您正在尝试做什么，或者预期的结果应该是什么样子。

标签： javascript jquery fadein fadeout

【解决方案1】：

这里有一个简单的辅助函数来帮助你做到这一点。

function fade(thisIn, callback){
    boxes.not(thisIn).filter(':visible').delay(5000).fadeOut('slow', function(){
        thisIn.fadeIn('slow', callback);
    });
}

jsFiddle

【讨论】：

【解决方案2】：

我会说尝试使用finish() 方法：

$('.btn').click(function(){
    $('#box3').finish().delay(5000).fadeOut('slow', function(){
        $('#box4').fadeIn('slow');
    });
});

在你的情况下，在 delay() 之后使用它可能会更好

【讨论】：

从 1.9 开始添加了结束方法 stop(true,true) 可以在以前的版本中使用
@KevinB 相同，但我并没有真正理解停止的区别。是一样的吗？
.finish() 也会导致所有排队动画的 CSS 属性也跳转到它们的结束值。api.jquery.com/finish
谢谢，但没用，现在延迟在 #box4 上不起作用，#box3 在延迟后仍然淡入淡出。

【解决方案3】：

使用这些方法的回调版本可能会更好：

$('.btn').click(function(){
    $('#box1').fadeOut('slow', function() {
        $('#box2').fadeIn('slow', function() {
            $('#box2').fadeOut('slow', function() {
                $('#box3').fadeIn('slow', function() {
                    $('#box3').fadeOut('slow', function() {
                        $('#box4').fadeIn('slow', function() {
                            $('#box4').fadeOut('slow');
                        });
                    });
                });
            });
        });
    });
});

jsFiddle

【讨论】：

我已经做到了，这样每个盒子都有一个单独的按钮来淡出自己并淡入下一个。这样一来，他们都只需一个按钮即可淡出淡入
我的解决方案也只有一个按钮。你看我的小提琴了吗？
我的网站每个盒子有 1 个按钮，总共 4 个按钮。每个按钮都会淡入另一个 div。我已经用一个工作示例更新了我的小提琴

【解决方案4】：

jQuery 官方文档说，第二个参数不是回调，而是缓动风格。

http://api.jquery.com/fadeIn/#fadeIn-duration-easing-complete http://api.jquery.com/fadeOut/#fadeOut-duration-easing-complete

$('#el').fadeOut(750,'swing',function(){
    $('#el').fadeIn();
});

所以只需将您的回调移动到第三个参数，一切都会奏效。

【讨论】：