悬停时jQuery动画晃动 [英] jQuery animate shake on hover

问题描述

我试图在不使用jQuery UI的情况下使元素在悬停时摇晃，并且遇到了以下代码，但是我似乎无法弄清楚如何在悬停时触发，此代码具有随机效果，每次都会使我感到困惑我尝试分散它.我正试图让他们一次完全不动一个动画

I am attempting to make an element shake upon hover without using jQuery UI and have come across the following code, however I cant seem to figure out how to trigger on hover, this code has a Random effect and it confuses me every time I try to diffuse it. I'm trying to get them to animate one at a time not altogether

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

        });

推荐答案

尝试这种方式:-

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

请参考 演示

Refer this DEMO

这篇关于悬停时jQuery动画晃动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！