爲什麼我的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>