jquery悬停动画图像（一次）

我偶然发现了这个帖子(http://stackoverflow.com/questions/10665918/jquery-animate-shake-on-hover)这几乎就是我要找的，还有这个JSFIDLE(http://jsfiddle.net/g6AeL/222/)，但我只需要在您将鼠标悬停在项目上时震动一次，而不是在项目上悬停时持续震动

有人能帮我让它在你悬停在物品上时只做一次吗

下面是来自JSFIDLE的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'
        });
    }
});

---

您可以这样添加计数器：

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

var计数器=0
var振动=功能（元素）{
如果（Counterok），我将开始制作插件：

$.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的精神，而不是原始代码
您可以尝试添加一个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); 
      }
    );
})

查看
你也应该在这里粘贴javascript代码。现在我只是想让上面的示例按照我希望的方式工作，然后我将更改元素以适合我的操作：）计数器变量的可能副本在所有对象之间共享。可能内部计数器更好？或者在mouseout中将其再次设为0