[英]jquery incomplete animation on hover
我正在为我的网站开发导航系统。 想法是在悬停父母时显示内容。
但是,当内容快速悬停时,动画是不完整的,并且在两者之间停止。
完整的工作和代码在下面的演示链接中。 关于更改代码的任何建议将很有帮助。
当同时悬停“两个”箭头(从一个箭头快速移动到另一个箭头)时,它们停止并且不完整
我使用的代码是
$('.anpn-wrap').mouseenter(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$txt.hide();
$cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
$wrap.stop().animate({ 'width': $cnt.outerWidth() });
$cnt.show().animate({ 'opacity': 1, 'margin': 0});
});
$('.anpn-wrap').mouseleave(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
$cnt.hide();
$wrap.stop().animate({ 'width': $txt.outerWidth() });
$txt.fadeIn();
});
});
通过不本地化$wrap
, $txt
和$cnt
,它们将是全局的,因此,如果在更早的mouseleave动画完成之前发生mousenter事件,则这些var将被覆盖,并且第一个动画中的回调将解决另一个按钮的元素。
解决方案是在两个处理程序中都用var
声明$wrap
, $txt
和$cnt
。
尝试这个:
$('.anpn-wrap').mouseenter(function() {
var $wrap = $(this).stop();
var $txt = $wrap.find('.anpn-text').hide();
var $cnt = $wrap.find('.anpn-cnt').css({
'opacity': 0,
'margin-top': '-50px',
'width': '200px'
}).show().animate({
'opacity': 1,
'margin': 0
});
$wrap.animate({
'width': $cnt.outerWidth()
});
}).mouseleave(function() {
var $wrap = $(this);
var $txt = $wrap.find('.anpn-text');
var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
'opacity': 0,
'margin-top': '-50px'
}, function() {
$cnt.hide();
$wrap.stop().animate({
'width': $txt.outerWidth()
});
$txt.fadeIn();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.