悬停时的 jQuery 动画 |非常快的传球，停止动画
Posted
技术标签:
【中文标题】悬停时的 jQuery 动画 |非常快的传球，停止动画【英文标题】：jQuery animation on hover | Very fast pass, stop the animation 【发布时间】：2012-10-16 13:31:22 【问题描述】：我创建了一个非常小的 jQuery 插件，供个人使用，它在悬停事件时在图像顶部创建叠加层，然后为两个图标设置动画。
鼠标移开时，它会再次为图标设置动画，然后淡出覆盖层。
虽然动画很好，但问题出在图标上。在鼠标过快的过程中动画 - 进入 - 图标但没有动画 - 出 - 图标。
在这里你可以看到我的意思的一个活生生的例子：http://jsfiddle.net/merianos/yPerY/1/
跟随源码
HTML
<section class="clearfix span-10 last post_container ">
<article>
<div class="imageHover">
<span class="overlay"></span>
<a href="#" class="image_preview"></a>
<a href="#" class="image_link"></a>
<img src="http://goo.gl/YRC7G" />
</div>
</article>
</section>
CSS
.post_container
position : relative;
margin : 100px;
.post_container article
position : relative;
display : block;
width : 280px;
.post_container article img
width : 278px;
border : 1px solid #dfe1e0;
.post_container article .overlay
z-index : 740;
display : block;
width : 100%;
height : 121px;
background : #000;
opacity : 0;
position : absolute;
top : 0;
left : 0;
.post_container article .image_link,
.post_container article .image_preview
display : block;
width : 32px;
height : 32px;
position : absolute;
cursor : pointer;
z-index : 741;
top : 88px;
opacity : 0;
.post_container article .image_link
background : #0AF;
left : 98px;
.post_container article .image_preview
background : #F0A;
left : 150px;
JavaScript
;(
function($)
$.fn.extend(
wplImageHover: function(options)
this.defaultOptions = ;
var settings = $.extend(, this.defaultOptions, options);
var image = null;
var methods =
init : function()
image.mouseenter(
function(e)
var overlay = $(this).find('.overlay');
overlay.stop().animate(
'opacity' : '0.25'
,
150
);
overlay.queue(
function()
var image_preview = $(this).siblings('.image_preview');
var image_link = $(this).siblings('.image_link');
image_preview.stop().animate(
'opacity' : 1,
'top' : '44px'
,
150
);
image_link.stop().animate(
'opacity' : 1,
'top' : '44px'
,
150
);
$(this).dequeue();
);
e.preventDefault();
).mouseleave(
function(e)
var image_preview = $(this).find('.image_preview');
var image_link = $(this).find('.image_link');
image_preview.stop().animate(
'opacity' : 0,
'top' : 0
,
150
);
image_link.stop().animate(
'opacity' : 0,
'top' : 0
,
150
);
image_link.queue(
function()
var overlay = $(this).siblings('.overlay');
overlay.stop().animate(
'opacity' : 0
,
150
);
overlay.queue(
function()
$(this).css(
'opacity' : '0'
);
$(this).siblings('.image_link, .image_preview').css(
'opacity' : '0',
'top' : '88px'
);
$(this).dequeue();
);
$(this).dequeue();
);
e.preventDefault();
);
return this.each(
function()
image = $(this);
methods.init();
);
);
)(jQuery);
$('.imageHover').wplImageHover();
有人可以帮帮我吗？
亲切的问候 梅里亚诺斯·尼科斯
【问题讨论】：
【参考方案1】：Demo JSFiddle
在使用 CSS 对图像应用顶部和不透明度之前的 mouseleave 事件中，停止在这些图像上发生的动画。否则它将覆盖您正在应用的 CSS（仅当动画在应用 CSS 时发生）。如果我们移动得非常快，您在鼠标输入中应用的动画正在发生。所以这会导致问题。
所以试试下面的脚本。
;(
function($)
$.fn.extend(
wplImageHover: function(options)
this.defaultOptions = ;
var settings = $.extend(, this.defaultOptions, options);
var image = null;
var methods =
init : function()
image.mouseenter(
function(e)
var overlay = $(this).find('.overlay');
overlay.stop().animate(
'opacity' : '0.25'
,
150
);
overlay.queue(
function()
var image_preview = $(this).siblings('.image_preview');
var image_link = $(this).siblings('.image_link');
image_preview.stop().animate(
'opacity' : 1,
'top' : '44px'
,
150
);
image_link.stop().animate(
'opacity' : 1,
'top' : '44px'
,
150
);
$(this).dequeue();
);
e.preventDefault();
).mouseleave(
function(e)
var image_preview = $(this).find('.image_preview');
var image_link = $(this).find('.image_link');
image_preview.stop().animate(
'opacity' : 0,
'top' : 0
,
150
);
image_link.stop().animate(
'opacity' : 0,
'top' : 0
,
150
);
image_link.queue(
function()
var overlay = $(this).siblings('.overlay');
overlay.stop().animate(
'opacity' : 0
,
150
);
overlay.queue(
function()
$(this).css(
'opacity' : '0'
);
$(this).siblings('.image_link, .image_preview').stop().css(
'opacity' : '0',
'top' : '88px'
);
$(this).dequeue();
);
$(this).dequeue();
);
e.preventDefault();
);
return this.each(
function()
image = $(this);
methods.init();
);
);
)(jQuery);
$('.imageHover').wplImageHover();
【讨论】：
以上是关于悬停时的 jQuery 动画 |非常快的传球，停止动画的主要内容，如果未能解决你的问题，请参考以下文章