Question

简单理解jQuery中的链接概念，但是在jQuery中链接后并没有给出期望的结果。 为什么它会在按钮点击时使字体颜色变为蓝色而不是红色然后是蓝色（链式）？

<!DOCTYPE html>
<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
      $(document).ready(function(){
        $("button").click(function(){
        // The following code should make the text-color as red   
        //   and then perform the other chaining function,   
        //     but its not making it red, instead it makes it blue on button click. 
           $("#p1").css("color", "red")
                   .slideUp(2000)
                   .slideDown(2000)
                   .css("color", "blue")
                   .slideUp(2000)
                   .slideDown(2000);
        });
     });
   </script>
  </head>
  <body>
    <p id="p1">jQuery is fun!!</p>
    <button>Click me</button>
 </body>
</html>

上面的jQuery代码应该将文本颜色设置为红色，然后执行另一个链接功能，但它不会使其变为红色，而是在按钮点击时使其变为蓝色。

Answer 1

您需要使用动画函数提供的回调，否则效果会立即执行，而不是在动画完成后执行。试试这个：

$("button").click(function() {
    $("#p1").css("color", "red").slideUp(2000, function() {
        $(this).css("color", "blue").slideDown(2000, function() {
            $(this).slideUp(2000, function() {
                $(this).slideDown(2000);
            });
        });
    });
});

Working example

如果您有很多链式动画，可能值得使用queues。

Answer 2

动画结束后，您可以使用回调来执行代码。否则，jQuery将立即做所有事情。链接不像队列一样工作。

＆＃13;

$("button").click(function(){
  $("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000, function(){
    	$(this).css("color", "blue");
    })
    .slideUp(2000)
    .slideDown(2000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>

＆＃13;

Answer 3

您需要将slideUp()和slideDown()函数中的可用回调函数分别用作the documentation mentions：

如果提供，则动画完成后将触发回调。这对于将不同的动画串联在一起非常有用序列。回调不会发送任何参数，但设置为 DOM元素被动画化。如果多个元素是动画的，那么重要的是要注意每次匹配都会执行一次回调元素，不是整个动画的一次。

所以你的＆＃34;链接＆＃34;方法看起来与原始示例有点不同：

$("#p1").css('color','red')
        .slideUp(2000,function(){
             // When the first slide-up has completed, then slide down
             $(this).slideDown(2000,function(){
                  // After you have slid-down, change your color
                  $(this).css('color','blue');
                  // Continue down the rabbit hole here...
             });
         });

工作示例

＆＃13;

<!DOCTYPE html>
<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
      $(document).ready(function(){
        $("button").click(function(){
           $("#p1").css("color", "red")
                   .slideUp(2000, function(){
                      $(this).slideDown(2000,function(){
                        $(this).slideDown(2000).css("color", "blue");
                      })
                   })
          });
     });
   </script>
  </head>
  <body>
    <p id="p1">jQuery is fun!!</p>
    <button>Click me</button>
 </body>
</html>

＆＃13;

Answer 4

jQuery链接会立即执行另一个函数，因此文本颜色设置为红色，两个动画正在排队，然后颜色设置为蓝色。

因为slideUp / slideDown函数对事件进行排队而不是等待它完成，所以文本颜色的变化几乎是在彼此之后立即发生。

您可以为幻灯片函数设置onComplete侦听器，如下所示：

$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000)
    .slideUp(2000, function() { $(this).css("color", "blue"); } )
    .slideDown(2000);

现在，您的文本颜色在第二个slideUp函数完成后设置为蓝色，而不是在排队后设置为蓝色。

Answer 5

如果您期待以下流程 - 将颜色变为红色 - 向上滑动 - 滑下 - 将颜色更改为蓝色 - 向上滑动 - 向下滑动

然后你应该使用slideup / slidingown函数提供的回调函数＆amp;正确嵌套它们以获得理想的效果。

您可以执行类似

的操作

//change color to red
$("#p1").css("color","red");
$("#p1").slideUp(2000,
function(){
    $("#p1").slideDown(2000,
    function(){
        $("#p1").css("color","blue")
        //dotimeoutifyouwanthere
        $("#p1").slideUp(2000,
        function(){
            $("#p1").slideDown(2000);
        })
    })
})

有关嵌套和＆amp ;;的更多详细信息回调检查 slideup，slideDown

jQuery链接没有按预期工作

5 个答案: