我试图在鼠标悬停在导航按钮上时使用with with来交换div可见性。 当没有鼠标悬停时,应该出现一个“默认”div。
我的问题是每次鼠标在链接之间转换时,默认的div会重新出现。
是否可以使交换无缝,或者是否可以采用不同的交换方式?我尝试使用fadeout / fadein事件为默认div设置导航容器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();
});
答案 0 :(得分:0)
我刚刚摆脱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。