jquery - JQuery动画功能不起作用

Question

我对animatejQuery 中的函数有疑问。我在本地工作，该功能不会为我的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>

score 5 · Accepted Answer

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

<!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>

小提琴

score 3 · Accepted Answer

如果你想让你的left属性有任何效果，你必须改变你的 div 的position属性。例如，您可以使用fixed.

jquery - JQuery动画功能不起作用

2 回答 2

Related

Reference