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