图像在鼠标上摇晃

我试图让鼠标上的图像抖动，我让它摇动，但它似乎不断摇动而不是鼠标hover。

vibrate.js（使用vibrate插件http://andreaslagerkvist.com/jquery/vibrate/ ）

jQuery(document).ready(function() { jQuery(".bottles").mouseover( function() { // configurations for the buzzing effect. Be careful not to make it too annoying! var conf = { frequency: 6000, spread: 7, duration: 700 }; // this is the call we make when the AJAX callback function indicates a login failure jQuery(this).vibrate(conf); }); }); 

HTML

我怎么能阻止这个function摇晃？

Answer 1

它不断震动的原因是插件被设置为创建一个间歇性震动的元素….永远。 使用setInterval生成抖动。 setInterval还用于触发间歇性摇动时段。

通过您链接的Andreas Lagerkvist插件工作，只需删除对doVibration（）的setInterval（）调用，即可删除永无止境的间歇性抖动。 然后你可以设置你想要它在hover时振动的时间长度（你不希望它在有人徘徊的整个时间内振动……对吗？这很烦人）

把你想要在div中振动的东西用.hover（）触发振动。 hover的优点是，如果用户将鼠标停在div上，它会在mouseenter和mouseleave上振动。

 $('#jquery-vibrate-example').hover(function() {$(this).vibrate();}); 

如果你只是想让它振动一次只需使用.mouseenter（）

 $('#jquery-vibrate-example').mouseenter(function() {$(this).vibrate();}); 

jsFiddle示例

当您调用.vibrate()您可以将速度，持续时间和传播（我删除频率）作为对象文字的一部分传递，以微调振动： $(this).vibrate({"speed":100,"duration":800,"spread":5}); 例如。 speed越大， speed越慢，因为speed直接用于振动的setInterval() 。 另外两个是自我解释的：

 jQuery.fn.vibrate = function (conf) { var config = jQuery.extend({ speed: 30, duration: 1000, spread: 3 }, conf); return this.each(function () { var t = jQuery(this); var vibrate = function () { var topPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2); var leftPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2); var rotate = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2); t.css({ position: 'relative', left: leftPos + 'px', top: topPos + 'px', WebkitTransform: 'rotate(' + rotate + 'deg)' // cheers to [e-mail] for the rotation-idea }); }; var doVibration = function () { var vibrationInterval = setInterval(vibrate, config.speed); var stopVibration = function () { clearInterval(vibrationInterval); t.css({ position: 'static', WebkitTransform: 'rotate(0deg)' }); }; setTimeout(stopVibration, config.duration); }; doVibration(); }); }; 

---

注意：插件会将您的摇动项目的位置更改为relative …因此，如果将其应用于最初absolute定位的元素，您将获得有趣的结果。

Answer 2

看一下这个页面的来源:(查看源代码然后向下滚动）

http://www.bennadel.com/resources/demo/jquery_vibrate_plugin/