jQuery - 在嵌套動畫序列中使用停止以正確回滾mouseleave上的所有動畫

Question

我試着閱讀了如何使用停止符，並在此處查看其他答案。現在修改這段代碼太久了。我似乎無法讓這部動畫始終保持平行。

要麼它在某個點停下來，要麼保持排隊動畫的底線（見下面的代碼）。無論哪種方式，我無法弄清楚在哪裏停止讓這個工作正常。

$(".property-wrapper").hover(function(e){ 

    var lines = new Array(); 
    lines.push($(this).find(".line-top")); 
    lines.push($(this).find(".line-left")); 
    lines.push($(this).find(".line-right")); 
    lines.push($(this).find(".line-bottom-right")); 
    lines.push($(this).find(".line-bottom-left")); 

    if(e.type == "mouseenter") 
    { 
     // Animate, starting from top, and going parallell towards the bottom. Then the bottom ones meet eachother. 
     // The motion forms a square 
     /* 
       Index 0 starts (from main.css) on left:50%; and animates to 0 while also animating width to 100%, giving 
       the illusion of it "shooting" out in both directions 
       Here is a representation of the indices and their direction of animation 

       <---------0---------> 
       1     2 
       |     | 
       |     | 
       |     | 
       |4--------><-------3| 
     */ 
     $(lines[0]).animate({width:"100%", left:0}, 'fast', function(){ 
      $(lines[1]).animate({height:"100%"}, 'slow' , function(){ 
       $(lines[4]).animate({width:"50%"}, 'slow'); 
      }); 
      $(lines[2]).animate({height:"100%"}, 'slow', function(){ 
       $(lines[3]).animate({width:"50%"}, 'slow'); 
      }); 
     }); 
    } 
    else 
    { 
     // Reverse the animation on mouseenter 
     $(lines[3]).animate({width:0}, 'fast', function() { 
      $(lines[2]).animate({height:0}, 'slow', function(){ 
       $(lines[0]).animate({width:0, left:"50%"}, 'fast'); 
      }); 
     }); 

     $(lines[4]).animate({width:0}, 'fast', function() { 
      $(lines[1]).animate({height:0}, 'slow'); 
     }); 
    } 
}); 

希望任何人都可以幫忙！ 感謝

編輯：這基本上是它是如何設置：

 <div> 
      <div class="line-top"></div> 
      <div class="line-left"></div> 
      <div class="line-right"></div> 
      <div class="line-bottom-right"></div> 
      <div class="line-bottom-left"></div> 
     </div> 

這裏是CSS。行div的父母是相對位置，並且這些行是絕對的以控制相對於父母的位置。

.line-top, .line-left, .line-right, .line-bottom-right, .line-bottom-left 
    { background:red; position:absolute; } 
    .line-top { height:1px; width:0; left:50%; top:0; } 
    .line-left { width:1px; height:0; left:0; top:0; } 
    .line-right { width:1px; height:0; right:0; top:0; } 
    .line-bottom-right { height:1px; width:0; right:0; bottom:0; } 
    .line-bottom-left { height:1px; width:0; left:0; bottom:0; } 

Answer 1

Well I originally over thought the hell out of this solution。然後，當我完成所有工作後，我再次看着它，意識到我正在愚蠢地想着它（面對手掌）。

每一個生命的前只需添加stop(true)，你應該achieve the effect you are looking for：

$(".property-wrapper").hover(function (e) { 
    console.debug('fire'); 
    var lines = new Array(); 
    lines.push($(this).find(".line-top")); 
    lines.push($(this).find(".line-left")); 
    lines.push($(this).find(".line-right")); 
    lines.push($(this).find(".line-bottom-right")); 
    lines.push($(this).find(".line-bottom-left")); 

    if (e.type == "mouseenter") { 
     $(lines[0]).stop(true).animate({ 
      width: "100%", 
      left: 0 
     }, 'fast', function() { 
      $(lines[1]).stop(true).animate({ 
       height: "100%" 
      }, 'slow', function() { 
       $(lines[4]).stop(true).animate({ 
        width: "50%" 
       }, 'slow'); 
      }); 
      $(lines[2]).stop(true).animate({ 
       height: "100%" 
      }, 'slow', function() { 
       $(lines[3]).stop(true).animate({ 
        width: "50%" 
       }, 'slow'); 
      }); 
     }); 
    } else { 
     // Reverse the animation on mouseenter 
     $(lines[3]).stop(true).animate({ 
      width: 0 
     }, 'fast', function() { 
      $(lines[2]).stop(true).animate({ 
       height: 0 
      }, 'slow', function() { 
       $(lines[0]).stop(true).animate({ 
        width: 0, 
        left: "50%" 
       }, 'fast'); 
      }); 
     }); 

     $(lines[4]).stop(true).animate({ 
      width: 0 
     }, 'fast', function() { 
      $(lines[1]).stop(true).animate({ 
       height: 0 
      }, 'slow'); 
     }); 
    } 
}); 

它不過需要注意的是我的超級超過想到的答案是更加敏感一點，沒有幾個邊緣案「毛刺」是非常重要的我在正式發佈的答案中看到。但就其本身而言，這有點古怪。我相信在中間的某個地方你會找到你正在尋找的解決方案。

編輯：

在我在思想解I ended up adding one more level of over thinking和令人驚訝的我已經非常接近真正的解決辦法。

基本上我發現，在我的思想解決方案中，我已經正確地管理了隊列，唯一的問題是，如果事件激發得太快，最終可能會排隊排隊。

也就是說，動畫需要被認爲不是一組動畫，而是一個動畫。一旦你突破了精神障礙，很明顯你需要將限制標準放入動畫排隊的時候。

所以我重新安裝了動畫，以確保其中的部分在其他部件可以加載之前完全加載。這真的很好，直到有人開始用鼠標spa spa。只要mouseenter和mouseexit事件不會在幾分之一秒內發生，那麼動畫將按預期工作。