1

I came across this post (http://stackoverflow.com/questions/10665918/jquery-animate-shake-on-hover) which is almost what I'm looking for, and this jsfiddle (http://jsfiddle.net/g6AeL/222/), but I just need the vibrate function to happen once when you hover on the item instead of continuously vibrating while you're hovering over the item.

Could someone help me with making it just do it once when you hover over the item?

Here's the javascript from the jsfiddle.

$(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'
    });
  }
}

它会根据您的需要振动多次，然后停止。您需要在某些可以选择的事件上重置计数器，例如 mouseout 等。

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

好的，我开始制作它的插件：

$.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 回答