無法防止動畫隊列建立使用jquery

Question

我做嵌套動畫像以下序列：

• 懸停在圖像1
• 顯示行1
• 隱藏線1
• 顯示行2
• 隱藏線2
• （等用於線路3 4 5）

我的小提琴：http://jsfiddle.net/z9Unk/119/

我只得到所需的行爲，如果我做控制時尚懸停。例如。如果我只徘徊一次，我會得到上面提到的行爲。

但是，如果我進/出多次徘徊快，我變得非常不一致的行爲。我在網上嘗試了各種建議，但無法使其工作。

我的期望是：即使我將鼠標懸停多次隨機，我應該得到相同的行爲，就好像「我將鼠標懸停只有一次，讓動畫完整的」我會得到。

請幫忙。我掙扎着。

HTML：

<div class="hover"> 
    Hover Me 
</div> 

<div class="item1"> 
    <div class="a"> 
     text for a 
    </div> 
    <div class="b"> 
     text for b 
    </div> 
    <div class="c"> 
     text for c 
    </div> 
    <div class="d"> 
     text for d 
    </div> 
</div> 

CSS：

.hover { 
    width: 100px; 
    height: 60px; 
    border: 1px solid red; 
} 


.item1 { 
    margin:25px; 
    width:600px; 
    height:400px; 
    border:10px solid green; 
} 
.a, .c { 
    clear: both; 
    float:left; 
    margin-top: 6%; 
    margin-left: 35px; 
    opacity:0.0; 
    font-size:30px; 
} 

.b, .d { 
    clear: both; 
    float:right; 
    margin-top: 6%; 
    margin-right: 25px; 
    opacity:0.0; 
    font-size:30px; 
} 

的jQuery：

a = $(".a"); 
b = $(".b"); 
c = $(".c"); 
d = $(".d"); 


$(".hover").hover(
    function() { 
     a.animate({opacity:1.0}, 2000, function() { 
     a.animate({opacity:0.0},3000, function() { 
      b.animate({opacity:1.0},2000, function() { 
      b.animate({opacity:0.0}, 3000, function() { 
       c.animate({opacity:1.0}, 2000, function() { 
       c.animate({opacity:0.0}, 3000, function() { 
        d.animate({opacity:1.0},2000, function() { 
        d.animate({opacity:0.0}, 3000, function() { 
     }); }); }); }); }); }); }); 
     }); 
    }, 
    function() { 
     a.opacity(0); //psuedcode 
     b.opacity(0); 
     c.opacity(0); 
     d.opacity(0); 
     a.stop(true, true); 
     b.stop(true, true); 
     c.stop(true, true); 
     d.stop(true, true); 
    } 
); 

Answer 1

你會需要另一張支票在那裏。類似於http://jsfiddle.net/z9Unk/120/。

從本質上講，我做了以下內容：

// This is your fallback condition 
stopAnimation = false; 

$(".hover").hover(
    function() { 
     stopAnimation = false; 
     a.animate({opacity:1.0}, 2000, function() { 
     // check the stopAnimation value before running the next animation 
     ! stopAnimation && a.animate({opacity:0.0},3000, function() { /* etc. */}) 
     }) 
    }, 
    function() { 
     stopAnimation = true; 
     a.stop(true, true); 
     b.stop(true, true); 
     c.stop(true, true); 
     d.stop(true, true); 
    } 
); 

你可能要想想也是，當你停止，除非你想要的話，只是掛出，直到你再次懸停設置不透明度回到0。

Answer 2

我不是100％肯定，你想要做什麼。我的意思是，我不知道你是否想要陷入100％不透明的問題，但我認爲我的代碼會有所幫助。讓我知道更多關於你想要達到的效果的細節，然後我會相應更新。

我的小提琴：http://jsfiddle.net/z9Unk/126/

，代碼：

$(".hover").hover(
    function() { 
     a.fadeTo(2000, 1).fadeTo(3000, 0, function() { 
      b.fadeTo(2000, 1).fadeTo(3000, 0, function() { 
       c.fadeTo(2000, 1).fadeTo(3000, 0, function() { 
        d.fadeTo(2000, 1).fadeTo(3000, 0) 
       }); 
      }); 
     }); 
    }, 
    function() { 
     $('.item1 > div').each(function(i, div) { 
      $(div).stop(true).fadeTo(0, 0); 
     }); 
    } 
); 

我也有一個停止檢查中出現過，但我只是不知道這是你想要達到的效果。

編輯：我更新了代碼，使其更加緊湊，並將.hide()更改爲.fadeTo(0, 0)，因此元素不會在頁面上跳轉。