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

演示

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

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

CSS 演示

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