jquery - 我怎样才能对 .mousenter THIS 执行两种效果？

Question

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");
});

Answer 1

你必须给它 position: relative;:

$('#menu').find('li').mouseenter(function() {
    $(this).css({'text-decoration': 'underline', 'position': 'relative'})
        .dequeue().animate({"top": "-=5px"}, "fast");
});

Demo

也就是说，您真的应该在 CSS 中执行此操作，而不是浪费资源尝试使用 jQuery 执行此操作:

#menu li {
    position: relative;
}
#menu li:hover {
    text-decoration: underline;
    top: -5px;
}

CSS Demo

或者，如果您确实希望顶部位置永远递增且永不返回，请使用组合，CSS 用于样式，jQuery 仅用于动画，如我的 third demo 所示。 .