它具有这种css风格
#mainNav { display:block; padding:5px; }
#mainNav ul { display:block; list-style-type:none; width:500px; border-collapse:collapse; }
#mainNav li { display:inline-block; width:100px; height:66px; text-align:center; padding-top:10px; float:left; background-color:gray; cursor:pointer; border-bottom:0px solid red; }
#mainNav a { color:white; text-decoration:none; text-transform:capitalize; }
#mainNav a.aHover { color:red; }
附加到这是JQuery代码
$(document).ready(function() {
$('#mainNav li').mouseover(function() {
var el = $(this);
$(this).animate({
"border-bottom-width":"+=5px"
},{ queue: false,duration: 500 },function() {
el.css('border-bottom-width','5px');
});
$(this).children('a').addClass('aHover');
});
$('#mainNav li').mouseout(function() {
var el = $(this);
$(this).animate({
"border-bottom-width":"-=5px"
},'0px');
});
$(this).children('a').removeClass('aHover');
});
});
现在我想要它做的是,将边框颜色淡入红色并淡出它,或者如代码所示,在悬停时将边框扩展到最大5px然后将边框放回到0px.
问题是,你可以看到我尝试在动画结束时更改LI元素的类,以确保边框达到其最大或最小宽度,但这不起作用,为什么？
你会如何淡化和淡出边框颜色？
最佳答案
试试下面,
$(document).ready(function() {
$('#mainNav li').hover(function() {
var el = $(this);
$(this).stop(true,true).animate({
"border-bottom-width": "5px"
},{
queue: false,duration: 500
});
$(this).children('a').addClass('aHover');
},function() {
var el = $(this);
$(this).stop(true,true).animate({
"border-bottom-width": "0px"
},duration: 500
});
$(this).children('a').removeClass('aHover');
});
});
改变,
> mouSEOver事件到mouseenter,因为它更适合你的情况
>将mouseenter / mouseleave更改为悬停
>更改= 5px,– = 5px到5px和0px.
>添加.stop(true,true)以确保动画完成并清除队列.
