如何在.mouseover上执行两个效果？

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所示。