css 效果很好,但我怎样才能让它同时使用动画效果?
HTML:
<div id="menu">
<ol>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
</ol>
</div>
JS:
$('#menu').find('li').mouseenter(function() {
$(this).css({'text-decoration': 'underline'}).dequeue().animate({"top": "-=5px"}, "fast");
});
最佳答案
你必须给它 position: relative;
:
$('#menu').find('li').mouseenter(function() {
$(this).css({'text-decoration': 'underline', 'position': 'relative'})
.dequeue().animate({"top": "-=5px"}, "fast");
});
也就是说,您真的应该在 CSS 中执行此操作,而不是浪费资源尝试使用 jQuery 执行此操作:
#menu li {
position: relative;
}
#menu li:hover {
text-decoration: underline;
top: -5px;
}
或者,如果您确实希望顶部位置永远递增且永不返回,请使用组合,CSS 用于样式,jQuery 仅用于动画,如我的 third demo 所示。 .
关于jquery - 我怎样才能对 .mousenter THIS 执行两种效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16938889/