Question

我在jQuery中遇到animate函数的问题。我在本地工作，该函数不会为div元素设置动画。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("div").animate({left: '250px'});
                });

            });
        </script>       
    </head>
    <body>

        <div style="position:absolute"> Animate Box </div>
        <button> Start </button>

    </body>
</html>

Answer 1

动画效果很好，但元素没有移动，因为它没有位置或起点：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            div {position: relative; left:0;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("div").animate({left: '250px'});
                });
            });
        </script>       
    </head>
    <body>
        <div> Animate Box </div>
        <button> Start </button>
    </body>
</html>

FIDDLE

Answer 2

如果您希望left属性生效，则必须更改div的position属性。例如，您可以使用fixed。

JQuery动画功能不起作用

2 个答案: