Javascript jquery悬停时动画不完整
我正在为我的网站设计一个导航系统。这样做的目的是在父对象悬停时显示内容 但是,当内容快速悬停时,动画是不完整的,并在两者之间停止 完整的工作和代码在下面的演示链接中。任何关于修改代码的建议都会很有帮助 演示: 当“两个”箭头同时悬停时(从一个箭头快速移动 箭头指向另一个)它们停止并且不完整 我使用的代码是Javascript jquery悬停时动画不完整,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,我正在为我的网站设计一个导航系统。这样做的目的是在父对象悬停时显示内容 但是,当内容快速悬停时,动画是不完整的,并在两者之间停止 完整的工作和代码在下面的演示链接中。任何关于修改代码的建议都会很有帮助 演示: 当“两个”箭头同时悬停时(从一个箭头快速移动 箭头指向另一个)它们停止并且不完整 我使用的代码是 $('.anpn-wrap').mouseenter(function(){ $wrap = $(this); $txt = $(this).find(
$('.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();
});
});
我不知道您想要什么,但是您可以将参数传递给以强制完成动画
stop(true, true)
查看此版本:通过不本地化
$wrap
、$txt
和$cnt
,它们将是全局的,因此如果在较早的mouseleave动画完成之前发生mousenter事件,这些变量将被覆盖,并且第一个动画中的回调将处理其他按钮的元素
解决方案是在两个处理程序中使用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();
});
});
你想要的行为是什么?让导航项在鼠标离开时停止/重置其动画是相当标准的。当您看到不希望出现的行为时,您使用的浏览器是什么?您是否确认它出现在多个浏览器中,而不仅仅是一个浏览器?我建议至少IE、Chrome、Firefox和Safari(没有特别的顺序)。包括歌剧也是个好主意。在歌剧中:我不能让它停在“中间”。。。。。。校正我刚试过按两个按钮洗牌。。。我在Opera中试过,当“两个”同时悬停在后面时,动画是不完整的。这是一个“相声”问题。每个按钮当前必须以某种方式处理其他按钮的动画元素。这可能是一个让jQuery选择器正确的问题,这样它们就只为
这个按钮的元素设置动画。当“两个”箭头同时悬停(从一个箭头快速移动到另一个箭头)时,它们就会停止。