0

シンプルなソーシャルアイコンバウンス効果を作成するために、JQuery/JQUIを初めて使用しています。

私は以下のコードがそれを釘付けにしたと思いました。

http://testing.renewablehull.co.uk/css3.html

..しかし、2つの問題があります：

  • アニメーションキュー（.stop（）で停止させることができないようです）
  • マウスを動かすと、アイコンの位置が変わります（TwitterアイコンがFacebookの下に移動し、Facebookアイコンが左/下にスライドします）。

明らかに私はここで何かが欠けています！私は全くの初心者ですので、優しくして正しい方向に向けてください。

どうもありがとう

B。

4

2 に答える 2

0

オプションは、ロールオーバーされている限り無限に実行するか、1回だけ実行してから停止するかです。エンドユーザーとして後者をお勧めします。

これは、最初の後に停止させる方法です。これは、エフェクトコールバックを使用して行われます。

 $(document).ready(function(){
          $('img').hover(function(){
              $(this).effect("bounce", { times:3, distance:8},function(e){

                  //disables it from going again
                  e.preventDefault();

                  //resets the position from relative to static
                  $(this).css('position','static');

              }, 0);                     
          });  
    });

また、ポジショニングの問題は、要素を残すjQuery効果に関係していることに気づきました。position:relativeこれを元に戻すとstatic、問題ないように見えます。

于 2012-06-15T09:53:37.813 に答える
0

次のように、アニメーションがスタックするのを防ぐことができます。

$(document).ready(function ()
{
    $('img').mouseover(function ()
    {
        if (!$(this).hasClass("img-hover"))
        {
            $(this).addClass("img-hover");
            $(this).effect("bounce", { times: 3, distance: 8 }, function ()
            {
                $(this).removeClass("img-hover");
            }, 0);
        }
    });
});

ちなみに、次を使用して効果を停止できます。

.stop (true, true);

停止時にJqueryのドキュメントを読んで、そこで必要な理由を理解してくださいtrue, true。

于 2012-06-15T10:26:44.827 に答える