1

我已经尝试阅读如何使用止损，并在此处查看其他答案。现在已经修补这个片段太久了。我似乎无法让这个动画始终平行。

它要么在某个点停止，要么在底线继续排队动画（参见下面的代码）。无论哪种方式，我都无法弄清楚在哪里停下来让它正常工作。

    $(".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。line div 的 parent 是相对定位的，而 lines 是绝对的，以控制相对于 parent 的位置。

    .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; }
4

1 回答 1

1

好吧，我最初过度考虑了这个解决方案。然后，当我完成所有工作时，我再次看了看它，意识到我是愚蠢的并且过度思考它（掌心）。

只需stop(true)在每个动画之前添加，您就应该达到您正在寻找的效果：

$(".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');
        });
    }
});

但是，重要的是要注意，我的超级思考答案反应更快，并且没有我在正式发布的答案中看到的一些边缘情况“故障”。但就其本身而言，它有点古怪。我相信在中间的某个地方你会找到你正在寻找的解决方案。

编辑：

在我的过度思考解决方案中，我最终增加了一个过度思考的层次，令人惊讶的是，我已经非常接近一个真正的解决方案。

基本上我发现在我过度思考的解决方案中，我正确地管理了队列，唯一的问题是如果事件触发得太快，你最终可能会不按顺序排队。

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

所以我重新制作了动画，以确保在加载其他部分之前绝对加载它的一部分。这非常有效，直到有人开始使用鼠标。只要mouseenter和mouseexit事件不会在几分之一秒内真正发生，那么动画就会按预期工作。

于 2013-03-06T20:24:27.720 回答