動畫，然後用淡入淡出效果替換該類的div

Question

的jsfiddle：Fiddle

它應該是工作的方式是如下：

1 - 的紅色塊從頂部滑動至底部
2 - 一旦做到這一點，則紅色方框淡出
3 - 那麼藍盒子淡入

以下是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

我會嘗試在一次打擊中攻擊大多數問題，但我懷疑我們可能需要一點點來回以徹底解決它。

首先，你的淡入/淡出問題與你的動畫被解僱的方式有關。你基本上調用淡出每一個元素單獨然後淡入，但你在你的需求所描述的功能，你應該在容器上發射一個褪色，而不是：

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

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

Fiddle

平滑過渡

如果您想在不閃爍的情況下平穩淡入淡出，然後返回，則可以使用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() Example Fiddle

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

我已經fadeto財產使用，儘量的鏈接。 http://jsfiddle.net/zcYLM/10/

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


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