[英]JQuery hover fade with default div transition stutter
将鼠标悬停在导航按钮上时,我尝试使用with与交换div可见性。 没有鼠标悬停时,将出现一个“默认” div。
我的问题是每次鼠标在链接之间转换时,默认div都会短暂出现。
是否有可能使交换变得无缝,或者对交换采取不同的方法? 我尝试为默认div设置一个带有淡入淡出/淡入淡出事件的nav容器div,但是我对此没有任何运气。
有关示例,请参见以下小提琴: http : //jsfiddle.net/ElectricCharlie/Wk8Yd/
$('div.hmnav').hover(function()
{
$('#_wnr00').stop(true,true).fadeOut();
$('#_'+this.id).stop(true,true).fadeIn(400);
},
function ()
{
$('#_'+this.id).stop(true,true).fadeOut(400);
$('#_wnr00').stop(true,true).fadeIn();
});
我只是摆脱了true,true
,它运行良好:
$('div.hmnav').hover(function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
function () {
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
});
也更新了您的jsFiddle。
编辑 :花时间清理您的jQuery以及:
$('#navbox_inner')
.corner("round 12px")
.parent()
.css({padding:1})
.corner("round 14px")
$('#navbox_inner').on({
mouseenter: function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
mouseleave: function(){
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
}
},'.hmnav');
这更快,因为它绑定到一个项目并适当地委派。 我还删除了元素选择器,因为基于纯类/基于id的选择器更快。 再次更新了jsFiddle。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.