0

http://apw-design.com/このウェブページを見ると、ページ全体に細い線で始まるdividがあります。マウスがメニューに入ると、ボックスはメニューを横切ってロゴの一部を横切って移動します。次に、マウスがメニューから直接ロゴに入ると、色が正しく変わりますが、メニューからのマウス離脱アニメーションが使用されます。ページからロゴまでスクロールすると、ボックスがどのように変換されるかが表示されます。

アニメーションのスクリプトは以下のとおりです。http： //pastebin.com/wU4c10NJ 参照用にcssファイルもアップロードしました：http： //pastebin.com/RgWZQTD9

4

1 に答える 1

0

問題は、eachDelayメニューの「mouseleave」関数内の関数にあるようです。遅延により、ロゴの「マウスエンター」機能の後に#whitelineアニメーションが起動します。イベントのチェーンは次のとおりです。

  1. メニューmouseleaveが起動します
  2. メニューeachDelayはメニュー項目をループします
  3. ロゴmouseenterの火
  4. メニューeachDelayが最後のアイテムに到達し、ロゴを上書きしますmouseenter

できることは、メニューにフォーカスがなくなったかどうかを確認する変数を導入し#whiteline、カーソルがロゴ上にない場合にのみアニメーションを起動することです。簡単な例を次に示します。

// Create a variable to check cursor focus
var lastFocus = "";

$('#menu').mouseenter(function(element) {
    lastFocus = "menu";
    // PLUS YOUR CODE
});

$('#logo').mouseenter(function(element) {
    lastFocus = "logo";
    // PLUS YOUR CODE
}); 

$('#menu').mouseleave(function(element) {
    $("#menu ul li").eachDelay(function(index){
        if(index == $("#menu ul li").size() -1){
            // Check if we haven't hovered over the logo whilst the delay was running
            if(lastFocus == "menu"){
                // Do the animation
            }
        }
    }, 30);
});

便利なデバッグのヒントはconsole.log("Event foo fired");、アニメーションを実行するスクリプト内のポイントで使用することです。これにより、ブラウザーコンソールを開いて、順序が少しずれているかどうかを確認できます。

于 2012-12-08T09:51:33.453 に答える