為什么我的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

如果要對top CSS進行動畫處理，則<li>元素的位置值必須為fixed ， relative或absolute 。 沒有它，動畫仍將完成，但是您不會在瀏覽器中看到任何視覺效果。

 $(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>