Javascript 设置动画，然后用淡入效果替换div类

JSFiddle：

其工作方式如下：

1-红色块从上到下滑动
2-一旦完成，红色框将消失
3-然后是蓝色框fadeIn

以下是html：

<div class="posRel">
    <div class="trans1"></div>
    <div class="trans2"></div>
    <div class="trans3"></div>
    <div class="trans4"></div>
    <div class="trans5"></div>
    <div class="trans6"></div>
    <div class="trans7"></div>
</div>

以下是js：

    for (i = 1; i <= 7; i++) {
        $('.trans' + i).toggleClass('toggle');
    }

    setTimeout(function () {
        $('.toggle').fadeOut('slow', function () {
            $(this).addClass('fSmall1').fadeIn('slow');
        });
    }, 2000);

---

for（i=1；i我将尝试一次解决您的大部分问题，但我怀疑我们可能需要来回一点来彻底解决它

首先，您的淡入/淡出问题与启动动画的方式有关。您基本上是单独调用每个元素的淡出，然后再调用淡入，但根据您在需求中描述的功能，您应该在容器上启动一个淡入：

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeOut('slow', function () {
        $('.toggle').addClass('fSmall1');
        $('.posRel').fadeIn('slow');
    });
}, 2000);

for（i=1；i如果您使用的是jQueryUI，这将起作用：

（这是最新版本）

这是一个简单的问题示例，但您可以将其应用到代码中

JS:

CSS:

我已使用fadeto属性，请尝试链接

请您提供一个正确的链接到您的测试用例（例如在JSFIDLE中）。因此不允许使用数字URL（IP）。您不能访问该链接吗？我肯定可以复制和粘贴它，但它不可单击，因为您已将其格式化为代码，因为SO不允许此类链接（您已经注意到）。我正在Chrome中检查您的项目，它似乎正常工作。您正在测试什么浏览器？这是我在工作中分配的ftp，我没有其他方式向您提供链接，只能将其作为代码发布。如果您可以访问，那么问题出在哪里？很好的解决方案，但有一个问题，如果您访问我发布的项目链接，然后你会看到现在图像消失了，然后新的图像消失了。你能告诉我第一个如何分解为第二个吗？当然，请看我对上面fadeTo方法的评论，我将发布一个新的提琴，更新js以包含fadeTo（）示例小提琴，其行为应符合您的要求。现在它已恢复到原始状态，因为在我的项目链接上，淡入淡出效果已消失。我的意思是：/我为如此天真而道歉。您网站上的代码与我上面的示例稍有不同，但适用相同的规则。您网站上的代码存在的问题是超时/淡出不匹配值。尝试我的平滑转换示例，看看是否有帮助，它的超时/淡出值工作得非常好。嗯，我现在回避jQuery UI，但是如果我没有选择余地，那么我会考虑这个解决方案，无论如何谢谢。
for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {$('.toggle').addClass('fSmall1');});
}, 2000);

$(document).ready(function() {
    $('div[class*=trans]')
        .toggleClass('toggle', 2000)
        .promise()
        .done(function() {
            $(this)
                .fadeOut(2000)
                .promise()
                .done(function() { 
                    $(this)
                        .addClass('blue')
                        .fadeIn(2000);
                });
        });
});

.posRel {
    position:relative;
}

div.posRel > div {
    background-color:red;
    position:absolute;
    top:0px;
    width:100px;
    height:100px;
}

div.posRel > div.trans1 { left:-50px; }
div.posRel > div.trans1.toggle { left:100px; top:150px; }
div.posRel > div.blue { background-color:blue; }

[http://jsfiddle.net/zcYLM/10/][1]


  [1]: http://jsfiddle.net/zcYLM/10/