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事件不会在几分之一秒内发生，那么动画将按预期工作。