理解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代码应该将文本颜色设置为红色,然后执行其他链接功能,但是它不会将其变为红色,而是在单击按钮时将其变为蓝色。

最佳答案

动画结束后,您可以使用回调执行代码。否则,jQuery将尽一切可能。链接不像队列那样工作。



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

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

10-05 20:50
查看更多