Jqueryでホバーを失うまでアイコンをバウンスさせる方法

ホバー上で上下にバウンスを上下させるアイコンを手に入れることはできませんが、ホバー1回につき1つのフルサイクルにすることしかできません。Jqueryでホバーを失うまでアイコンをバウンスさせる方法

ここはページです。要素/アイコンは「ビジネス」画像です。 http://fdtcincinnati.com/landing-page

この効果（または同様の瞬き効果）はどのように達成されますか？

ありがとうございます！ここで

EDIT

はjqueryの/ JSである：ここで

$(document).ready(function() { 

    var timeout = ''; 
    var intervalId = null; 
    var bouncing = false; 

    $("a#business").hover(function() { 

     bouncing = true; 
     bounce($(this), bouncing, 160, 170); 

    }, function() { 

     bouncing = false; 
     bounce($(this), bouncing, 160, 170); 

    }); 

}); 

function bounce(ob, bouncing, val1, val2) { 

    if (! bouncing) { 

     ob.animate({ "top": val1 + "px" }, 400); 

    } else { 

     ob.animate({ "top": val1 + "px" }, 400).animate({ "top": val2 + "px" }, 400); 

     setTimeout(bounce(ob, bouncing, val1, val2), 800); 

    } 

}

はHTMLです：

<body id="landing_page"> 

    <div id="fp_wrapper"> 

     <h1 id="lp_logo"><a href="/">First Discount Travel Cincinnati</a></h1> 

     <a id="business" href="">Business</a> 

     <a id="leisure" href="">Business</a> 

     <p id="below">Click one of the couples to continue!</p> 

    </div><!-- end fp_wrapper --> 

</body>

出典

2011-12-19 Allen Gingrich

おそらく、jQuery UIのバウンス効果を利用することができます。これにより、必要なコードの量が簡単になります。 businessイメージにデータオブジェクトを添付して、グローバル変数に頼る必要はありません。次に、バウンスエフェクトのコールバックを使用してアニメーションをループします。

http://jsfiddle.net/RkNV2/2/

$('img').hover( 
    function() { $(this).data('bounce', true); bounce($(this));}, 
    function() { $(this).data('bounce', false); 
}); 

function bounce($elem) { 
    $elem.effect('bounce', { times: 1, distance: 10 }, 500, function() { 
     if ($(this).data('bounce')) bounce($elem); 
     else $elem.stop(); 
    }); 
}

バウンス効果を使用すると、バウンス、バウンスの距離、方向、モードの＃を制御できます。

http://docs.jquery.com/UI/Effects/Bounce

出典

2011-12-20 04:39:55 mrtsherman

あなたのためにいくつかの本当に一般的なコード - 続けるためにかどうかを示すフラグを設定しますホバーが終了したらそのフラグをクリアします。

var bouncing = false; 

$("#yourelement").hover(
    function() { 
     bouncing = true; 
     yourBounceFunction(); 
    }, 
    function() { 
     bouncing = false; 
    } 
); 

function yourBounceFunction() { 
    if (!bouncing) { 
     // stop the animation 
    } else { 
     // continue current animation 
    } 
}

あなたのコードを見ることなく、より具体的な何かを提供することはできません。

EDIT、今あなたのコードを投稿したこと：あなたのコードから次の行は動作しません。

setTimeout(bounce(ob, bouncing, val1, val2), 800);

あなたは最初のパラメータとしてsetTimeout()に関数のリファレンスを渡す必要があります。あなたのコードは、実際にはこれらのパラメータを使ってbounce()関数を呼び出し、結果を（定義されていない）結果をsetTimout()に渡します。 setTimeout()にパラメータとして匿名関数を定義し、その関数の中にあなたの関数を呼び出す、次のことを試してみてください。

setTimeout(function(){ bounce(ob, bouncing, val1, val2); }, 800);

は、あなたがタイムアウトを取り除くだけの中から、再び関数を呼び出す取得したいこと、と述べましたアニメーションの完全なハンドラです。

また、関数にパラメータとしてbouncingを渡すべきではありません。関数は、ホバーハンドラと同じ変数にアクセスする必要があります。だからあなたのdocument.readyにバウンス機能の定義を移動（またはグローバル、外部のdocument.readyとしてbouncing変数を宣言します）：

$(document).ready(function() { 

    var bouncing = false; 

    $("a#business").hover(function() { 
     bouncing = true; 
     bounce($(this), 160, 170);   
    }, function() { 
     bouncing = false; 
    }); 

    function bounce(ob, val1, val2) { 
     if (!bouncing) { 
      // stop bouncing: animate back to default position 
      ob.animate({ "top": val1 + "px" }, 400); 
     } else { 
      ob.animate({ "top": val1 + "px" }, 400) 
      .animate({ "top": val2 + "px" }, 400, function() { 
       // animation just finished, so go again: 
       bounce(ob, val1, val2); 
      }); 
     } 
    } 

});

私は最後のオプションをテストしていませんが、アイデアは、あなたが提供することですアニメーションが完了するとjQueryがコールバックするコールバック関数。コールバック内でバウンス関数を再度呼び出します。コールバックで変数bouncingを再度テストする必要はありません。なぜなら、バウンス関数が最初にテストするのはテストであるからです。

（.animate()は期間後のパラメータとして、オプションのコールバック関数を取る - 完全なコールバック関数はどのように機能するかに関する詳しい情報は、jQuery .animate() docoを参照してください。）

出典

2011-12-19 00:14:43 nnnnnn

これを書くために時間を割いていただきありがとうございます。最初の解決策はそれを一度発火させるだけでした。私が話しているように、私は二番目のことを試みている。 –

ようこそ。原則としてどちらのソリューションも機能するはずです。それは、既存のコードとどちらか一方をどのように統合するかという問題です。私はあなたの既存のコードを見ずにあなたに助言することはできません... – nnnnnn

ここに2番目のソリューションが採用されたページです。私は同じ関数を再帰的に呼び出すことさえあります。 http://fdtcincinnati.com/landing-page –

を私は推測する、それはあなたが「バウンス」

によって何を意味するかによって決まります

アニメーションを作成したい場合は、jqueryで行う必要はありません。あなたはちょうどアニメーションGIFを使用することができます&ホバー状態のためのいくつかのCSSを定義する？

#youricon:hover { 
    background-image: url(images/bounce.gif); 
}

出典

2011-12-19 00:18:21 Nick

Jqueryでホバーを失うまでアイコンをバウンスさせる方法

答えて

関連する問題