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，令人惊讶的是，我已经非常接近一个真正的解决方案。

基本上，我认为在我的过度思考的解决方案中，我正确地管理了队列，唯一的问题是，如果事件触发得太快，你可能会把事情排得乱七八糟。

也就是说，动画需要考虑的不是一组动画，而是单个动画。一旦你突破了这一心理障碍，很明显，你需要在动画应该何时排队时设定限制标准。

因此，我重新制作了动画，以确保在加载其他部分之前完全加载了它的部分。这真的很好用，直到有人开始使用鼠标。只要mouseenter和mouseexit事件在不到一秒钟的时间内不发生，动画就会按预期工作。