鼠标悬停时图像抖动 [英] image shake on mouse over
问题描述
我试图使图像在鼠标悬停时晃动，但我想让它晃动，但它似乎一直在晃动，而不是在鼠标悬停时晃动.
I'm trying to make a image shake on mouse over, I got it to shake but it seems to shake constantly rather then on mouseover.
vibrate.js(使用振动插件 http://andreaslagerkvist.com/jquery/vibrate/)
vibrate.js (uses the vibrate plugin 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
<div id="bottle">
<img class="bottles" src="/images/_garlic.png">
</div>
如何停止该功能的摇动?
How would I stop that function from shaking?
推荐答案
之所以会不断晃动，是因为插件被设置为创建一个元素，该元素会间歇性地晃动……直到永远.摇动是由 setInterval 引起的. setInterval还用于触发间歇性摇动.
The reason it shakes constantly is that the plugin is set up to create an element that shakes intermittently.... for ever. The shake is produced with setInterval. setInterval is also used to trigger the intermittent periods of shaking.
使用 您链接到的Andreas Lagerkvist的插件 ，只需删除对doVibration()的setInterval()调用，即可消除永无止境的间歇性抖动.然后，您可以设置您希望它在悬停时振动的时间(您不希望它在某人悬停的时间整个振动...对吗?这很烦人)
Working from the plugin by Andreas Lagerkvist you linked to, just remove the never ending intermittent shakes by removing the setInterval() call to doVibration(). Then you can set how long you want it to vibrate on a hover (you don't want it to vibrate the entire time someone hovers... do you? that'd be annoying)
将要振动的内容放在div中，并使用 .hover()触发振动 .悬停的好处是，如果用户将鼠标停在div上，它会在mouseenter和mouseleave上振动.
Put what you want to vibrate in a div and trigger the vibration with a .hover(). The advantage of hover is that it vibrate on both mouseenter and mouseleave if the user stops their mouse over the div.
$('#jquery-vibrate-example').hover(function() {$(this).vibrate();});
如果只希望它振动一次，只需使用 .mouseenter()
If you only want it to vibrate once just use .mouseenter()
$('#jquery-vibrate-example').mouseenter(function() {$(this).vibrate();});
jsFiddle示例
jsFiddle example
当您调用.vibrate()时，您可以将速度，持续时间和扩展(我去除了频率)作为对象常量的一部分来进行微调，例如:$(this).vibrate({"speed":100,"duration":800,"spread":5});. speed越大，摇动越慢，因为speed直接在摇动的setInterval()中使用.另外两个是不言自明的:
When you call .vibrate() you can pass the speed, duration, and spread (I removed frequency) in as parts of an object literal to fine tune the vibration: $(this).vibrate({"speed":100,"duration":800,"spread":5}); for example. The larger the speed the slower it shakes, since speed is used directly in the setInterval() of the shaking. The other two are self explanatory:
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 erik@birdy.nu 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位置的元素上，您会得到有趣的结果.
Note: The plugin changes the positioning of your shaking item to relative... so you'll get funny results if you apply it to an originally absolutely positioned element.
这篇关于鼠标悬停时图像抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
