Javascript 为什么我的jQuery动画效果不起作用？

这是html，全部在头部：

    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

不透明度有效，但动画无效，有什么问题吗？

如果要为顶部CSS设置动画，元素的位置值需要为固定、相对或绝对。没有它，动画仍将完成，但在浏览器中看不到任何视觉效果

$document.readyfunction{ $li.fadeTo0，0.6， $li.mouseenterfunction{ $this.fadeTo100，1， $this.animate{top:-=20px}，快速 }; $li.mouseleave函数{ $this.fadeTo100，0.6， $this.animate{top:=20px}，快速 }; }; 李{ 位置：绝对位置； } 项目1 项目2 项目3

---

或者固定的或者相对的。absolute会将所有列表元素放在彼此的顶部，所以这可能不是一个好的选择。很酷，但代码片段表明代码显然已被破坏。就像我所说的，它将所有项目放在彼此的顶部，如果你将鼠标悬停在它们上方，它们将飞离屏幕，永远不会回来。是的，这是absolute的预期结果，正如您所指出的。@Juhana根本问题是position属性，如何使动画可视化显示，与如何制作漂亮的动画无关。此外，OP没有提供关于如何显示的信息，有一百万种可能性。这就回答了为什么我的jQuery动画效果不起作用的问题。你从顶部缺少了一个+值：=20px

$(document).ready(function() {

    $("li").fadeTo(0, 0.6),

    $("li").mouseenter(function() {
        $(this).fadeTo(100, 1),
        $(this).animate({top: "-=20px"},"fast")
    });
    $("li").mouseleave(function() {
        $(this).fadeTo(100, 0.6),
        $(this).animate({top: "=20px"},"fast")
    });


});