jQuery的动画悬停抖动(jQuery animate shake on hover)

我试图使在悬停的元素摇不使用jQuery UI和所遇到下面的代码，但是我似乎无法弄清楚如何在悬停触发，该代码具有随机效应和它的每一个我尝试的时间让我困惑漫它。 我试图让他们在同一时间并非完全动画一个

http://jsfiddle.net/g6AeL/

   $(function() {
      var interval = 10;
      var duration= 1000;
      var shake= 3;
      var vibrateIndex = 0;
      var selector = $('aside.featured a'); /* Your own container ID*/
        $(selector).click( /* The button ID */

        function(){ 

        vibrateIndex = setInterval(vibrate, interval);
        setTimeout(stopVibration, duration);

        });

        var vibrate = function(){
        $(selector).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 stopVibration = function() {
        clearInterval(vibrateIndex);
        $(selector).stop(true,false)
                .css({position: 'static', left: '0px', top: '0px'});
            };

        });

Answer 1:

试试这个方法： -

$(function() {
  var interval = 10;
  var duration= 1000;
  var shake= 3;
  var vibrateIndex = 0;
  var selector = $('.box'); /* Your own container ID*/
    $(selector).hover( /* The button ID */
        function(){ 
        vibrateIndex = setInterval(vibrate, interval);    
        },
        function(){ 
            clearInterval(vibrateIndex);
            $(selector).stop(true,false)
                .css({position: 'static', left: '0px', top: '0px'});
        }
    );

    var vibrate = function(){
        $(selector).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'
        });
    }
});

请参阅此DEMO

Answer 2:

使用CSS

.item:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

文章来源: jQuery animate shake on hover