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です。線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; }
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');
        });
    }
});

ただし、私の非常に考えすぎた回答はもう少し応答性が高く、公式に投稿した回答に見られるいくつかのエッジケースの「グリッチ」がないことに注意することが重要です。しかし、それ自体は少し風変わりです。その中間のどこかに、あなたが探している解決策が見つかると確信しています。

編集：

私の考えすぎた解決策では、最終的にもう 1 つのレベルの考えすぎを追加することになり、驚くべきことに、実際の解決策に非常に近づいています。

基本的に、考えすぎた解決策では、キューを正しく管理していたことがわかりました。唯一の問題は、イベントの発生が速すぎると、順序が狂ってキューに入れられる可能性があることでした。

つまり、アニメーションは一連のアニメーションではなく、1 つのアニメーションとして考える必要があります。その精神的な障壁を破ると、アニメーションをキューに入れるタイミングに制限基準を設定する必要があることが明らかになります。

そこで、アニメーションの一部を完全にロードしてから他の部分をロードできるように、アニメーションを再調整しました。これは、誰かがマウスでパチパチ音を鳴らし始めるまで、非常にうまく機能します。mouseenterとmouseexitイベントが文字通り一瞬のうちに発生しない限り、アニメーションは期待どおりに機能します。

于 2013-03-06T20:24:27.720 に答える