动画，然后用渐变效果替换div类

Question

JSFiddle: Fiddle

它的工作方式如下:

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

项目链接:http://50.87.144.37/~projtest/team/design/EO/page-2.html

链接到JSFiddle

我所面临的问题:

• fadeOut和fadeIn不工作
• 还有什么比settimeout更好的方法吗?

当涉及到js/jQuery时，我相当缺乏经验，所以请随意指出任何愚蠢的错误。谢谢。

Answer 1

我已经使用了淡出属性，尝试链接。http://jsfiddle.net/zcYLM/10/

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

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

Answer 2

如果您正在使用jQueryUI，这将工作:

http://jsfiddle.net/zcYLM/11/(这是一个更新)

这是你的问题的一个基本的、简化的例子，但是你可以把它应用到你的代码中。

JS:

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

CSS:

.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; }

Answer 3

我会尝试一次性解决你的大部分问题，但我怀疑我们可能需要一些来回才能完全解决它。

首先，你的淡入/淡出问题与你的动画被触发的方式有关。你实际上是在每个元素上分别调用淡出，然后再调用淡入，但是从你在需求中描述的功能来看，你应该在容器上触发一个淡出:

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}
setTimeout(function () {
    $('.posRel').fadeOut('slow', function () {
        $('.toggle').addClass('fSmall1');
        $('.posRel').fadeIn('slow');
    });
}, 2000);

小提琴

平稳过渡

如果你想有一个平滑的淡出，没有闪烁，然后回来，你可以使用fadeTo()方法代替。下面是一个FadeTo()的例子，这将使所有的形状下降，暂停几分之一秒，然后改变颜色。现在您可以尝试删除setTimeout，因为fadeTo控制动画时间，但我让它尽可能接近原始值。

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}
setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {$('.toggle').addClass('fSmall1');});
}, 2000);

fadeTo()示例Fiddle