0

ページに HTML aside 要素があり、その要素にいくつかの効果 (アニメーション) を追加しました。私はほぼ完了しましたが、何らかの理由でアニメーションが無秩序に実行される理由を理解できません...完全に機能するコードを台無しにしたくないので、可能であれば2番目の機能に集中してください

$(document).ready(function(){
$("aside, #top").hover(function(){
    $("aside").animate({width:100}, 700);
    $("#top").animate({width:100}, 700);
    $("#navigation").show();
});

$("aside, #top").mouseleave(function(){
    $("aside").animate({width:10}, 700);
    $("#top").animate({width:10}, 700);
    $("#navigation").hide();
});

最後のもの

$("#navigation").hide();

同じ関数内で他の 2 つより前に実行されます。なんで？

4

2 に答える 2

2

コールバックを使用します。

$("#top").animate({width:10}, 700, function(){
    $("#navigation").hide();
});

理由について簡単に説明すると、最初の 2 行が終了するまでに時間がかかり、最後の 2 行が終了する前にすぐに終了するためです。

于 2012-09-28T02:45:12.317 に答える
2

hide が「最初に」実行される理由は、3 つすべてが同時に実行されるためです。アニメーションを注文するには、コールバックまたはチェーンを使用する必要があります。http://api.jquery.com/animate/

コールバックは、アニメーションが終了した後に実行されます。.hide時間がまったくかからないため、最初に実行されるように見えますが、アニメーションの実行には時間がかかり700msます。

.hideアニメーション サイクルの特定の時点で発生させたい場合は、タイムアウトを使用することもできます。

$("aside, #top").mouseleave(function(){
    $("aside").animate({width:10}, 700);
    $("#top").animate({width:10}, 700, function(){
         $("#navigation").hide();
    });        
});

また

$("aside, #top").mouseleave(function(){
    $("aside").animate({width:10}, 700);
    $("#top").animate({width:10}, 700);
    setTimeout(function(){
         $("#navigation").hide();
    }, 700);        
});

（psst。「追加」とは、連結に近いものを意味します。要素に効果を追加するのではなく、それらを添付します。アニメーション操作はイベントではないため、イベント順序の問題ではなく、実行順序の問題です。乾杯。）

于 2012-09-28T02:47:06.767 に答える