while mouse中的Flash图像已结束
我需要在鼠标悬停在鼠标上方时闪烁图像并在鼠标悬停后停止闪烁。但是“flash_imgs”总是通过鼠标移动div来调用。while mouse中的Flash图像已结束
如果我使用2个按钮(#start,#stop)和.click() - 一切正常。但我只需要'mouseover'和'mouseout'。
HTML:
<div class="container">
<img src="img1.gif" alt="" class="slide">
<img src="img2.gif" alt="" class="slide">
<img src="img3.gif" alt="" class="slide">
<img src="img4.gif" alt="" class="slide">
</div>
风格:
<style type="text/css">
img { position: absolute; width: 600px; height: 300px;}
div.container { border: 1px solid red; width: 600px; height: 300px; }
</style>
JS:
(function() {
var enable = null,
container = $('div.container'),
imgs = container.find('img'),
timeInOut = 1000,
intervalTime = imgs.length * timeInOut;
imgs.each(function(){
$(this).hide();
});
function flash_imgs(images, time){
images.each(function(i){
$(this).delay(time * i).fadeIn(time/2).fadeOut(time/2);
});
}
container.on('mouseover', function(){
flash_imgs(imgs, timeInOut);
enable = setInterval(flash_imgs, intervalTime, imgs, timeInOut);
});
container.on('mouseout', function(){
clearInterval(enable);
});
})();
谢谢!
鼠标悬停可能是错误的事件。每当你移动你的鼠标就会重新触发,并且你将建立一个队列。所以首先要交换mouseenter
和mouseleave
。
接下来,您只会清除mouseout上的间隔,这意味着它不可能立即停止。我相信jQuery有一个可以用于动画的.stop()
函数,但是我认为我会把这个部分留给你...因为我觉得脏,使得闪烁的内容。 ;-)
container.on('mouseenter', function(){
flash_imgs(imgs, timeInOut);
enable = setInterval(flash_imgs, intervalTime, imgs, timeInOut);
});
container.on('mouseleave', function(){
clearInterval(enable);
});
故事结束。稍微少癫痫症适合版本在这里 - http://jsfiddle.net/6bwTJ/1/ – mrtsherman 2012-04-06 06:40:35
非常感谢)我不闪烁,但smoooooooth改变图像))[http://jsfiddle.net/FnTan/2/]( http://jsfiddle.net/FnTan/2/) – kerstvo 2012-04-06 06:50:52
*我需要刷新图像*。有一刻[我有一个闪回](http://en.wikipedia.org/wiki/Blink_element)。 – nico 2012-04-06 06:24:55