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

Question

这是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> 

，其中第二个是我的js文件！ 的JS文件看起来是这样的：

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


}); 

不透明度的工作，但不是动画，有什么不好？

Answer 1

你<li>元素需要有fixed，relative或absolute的位置值，如果您设置动画的top CSS。没有它，动画仍然会完成，但在浏览器中不会看到任何视觉效果。

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

 

 
});

li { 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
</ul>