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> CSS制作动画，则fixed元素的位置值必须为relative，absolute或top。没有它，动画仍将完成，但您不会在浏览器中看到任何视觉效果。

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

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

1 个答案: