Question

我是jQuery的新手，并且使用.animate()函数编写了一个非常简单的脚本。这是完整的HTML源代码：

<!doctype html>
<html>
    <head>
        <title>Testing jQuery</title>
        <style type="text/css">

            div {
                width: 400px;
                height: 300px;
                position: relative;
                left: 10px;
                margin: 10px 20px;
            }
            #red {
                background-color: red;
            }
            #green {
                background-color: green;
            }
            #blue {
                background-color: blue;
            }

        </style>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script type="text/javascript">
            $(document).ready(function() {
                $("div").click(function() {
                    $(this).animate({opacity: 0.6, left: "+=40;"}, 2000);   
                });


            });
         </script>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

似乎以这种方式编写.animate()函数只会动画所点击的div的不透明度，并且不会影响其位置的任何变化。有趣的是，如果我颠倒.animate()函数中参数的顺序，那么：

$("div").click(function() {
                    $(this).animate({left: "+=40",opacity: 0.6}, 2000); 
                });

同时发生位置变化和不透明度变化。我遵循了.animate() jQuery API documentation的语法，并且使用了类似的语法：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

我很确定错误出现在我的代码本身中，但我还是不能指责它。

简单的jQuery动画：未按预期发生位置变化

0 个答案: