1

私はこの投稿（http://stackoverflow.com/questions/10665918/jquery-animate-shake-on-hover）に出くわしました。これはほとんど私が探しているものであり、このjsfiddle（http://jsfiddle.net/ g6AeL / 222 /）ですが、アイテムにカーソルを合わせている間は継続的に振動するのではなく、アイテムにカーソルを合わせたときに1回だけ振動機能を実行する必要があります。

アイテムにカーソルを合わせたときに、誰かがそれを1回だけ実行するのを手伝ってもらえますか？

これがjsfiddleのjavascriptです。

$(function() {
  var interval = 10;
  var duration= 1000;
  var shake= 3;
  var vibrateIndex = 0;
  var selector = $('.box'); /* Your own container ID*/
    $(selector).each(function(){
        var elem = this;
        $(this).hover( /* The button ID */

        function(){ 
            vibrateIndex = setInterval(function(){
                vibrate(elem); 
            }, interval);
        },
        function(){ 
            clearInterval(vibrateIndex);
            $(this).stop(true,false)
                .css({position: 'static', left: '0px', top: '0px'});
        }
    );
    })

    var vibrate = function(elem){
        $(elem).stop(true,false)
        .css({position: 'relative', 
        left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
        top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
        });
    }
});
4

3 に答える 3

1

次のようにカウンターを追加できます。

var Counter = 0

var vibrate = function(elem){
  if (Counter <= 100) {
    Counter++;
    $(elem).stop(true,false)
    .css({position: 'relative', 
    left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
    top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
    });
  }
}

何度でも振動して停止します。マウスアウトなど、選択できるイベントのカウンターをリセットする必要があります。

http://jsfiddle.net/g6AeL/226/

于 2013-01-18T01:03:08.877 に答える
1

setTimeoutを追加して、時々揺れを止めることができます。

多分このようなもの：

$(selector).each(function(){
    var elem = this;
    var vibrateIndex;
    var timeoutIndex;
    $(this).hover( /* The button ID */

    function(){ 
        vibrateIndex = setInterval(function(){
            vibrate(elem); 
        }, interval, 0);
      timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
    },
      function(){
        clearInterval(vibrateIndex);
       clearTimeout(timeoutIndex); 
      }
    );
})

jsfiddleをチェックしてください

于 2013-01-18T01:19:44.223 に答える
0

それのプラグインを作り始めるために私のテイクをOK：

$.fn.extend({

   randShake : function(duration, shakeInt,shake){
              return $(this).stop(true,false)
                        .css({
                             left : Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                             top : Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'

                         }).vibrate(duration, shakeInt,shake);
      },

     vibrate : function(duration, shakeInt,shake) {
       if (duration>shakeInt) setTimeOut(function(){

                          $(this).randShake(duration-shakeInt, shakeInt,shake);

                           },shakeInt);

             }
            return this;
          }      
       });


      jQuery(function($,undefined) {

          $(selector).on("mouseover",function(){
              $(this).vibrate(duration, shakeInt,shake);
                 });

       })

まだテストしていませんが、このアイデアは元のコードよりもjqueryの精神に基づいているように思えます

于 2013-01-18T01:12:34.530 に答える