为什么JQuery要求我显式地将排队的图像淡出？

演示一些简单的JS函数的排队。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<style> 

.div1 { 
    height:300px; 
    width:20%; 
    background-color: red; 
    float:left; 
} 

</style> 
<meta charset="ISO-8859-1"> 
<title>Test</title> 
</head> 
<body> 
<div class="div1">div1</div> 
<img class="image" style='width: 30%; height: 30%' src='https://www.google.com/images/srpr/logo11w.png'> 
<button type="button" onclick="doStuff()" name="do">Do it</button> 

</body> 
<script> 
function doStuff() 
{ 
    var body = $('body'); 
    body.clearQueue(); 
    body.queue(function(){ 
     console.log('here'); 
     body.css("background-color", "yellow"); 
    }); 

    var div1 = $('.div1'); 
    div1.clearQueue(); 
    div1.queue(function(){ 
     div1.css("background-color", "green"); 
    }); 

    var image = $('.image'); 
    image.clearQueue(); 
    image.queue(function(){ 
     $(this).fadeOut(3000)}); 
    //image.dequeue(); //image doesn't fade without this step 
} 

</script> 
</html>

请注意，单击按钮时，正文和div1颜色会按预期更改。但是，除非我取消注释Google图像淡出的出队声明，否则图像不会褪色。我很好奇，为什么我不必明确地将前两个操作出列，以使它们生效，但是随着图像淡入淡出，我必须调用出列方法。

来源

2015-07-20 swingMan

你能解释一下你试图通过通过动画队列明确地做这些操作来实现呢？比如，为什么不直接执行'image.fadeOut（3000）;'？ – Pointy

@有点肯定，这将工作，但我正在一个网页上工作，在稍后执行它们之前，我必须排队几个操作。在设计过程中，我注意到了这种行为，在继续之前需要了解它。 – swingMan

在前两种情况下，您要添加到队列中的函数执行的操作与动画队列无关。改变颜色的回调会立即执行，然后完成。

但是，您使用图片所使用的回调函数，请求在回调中请求的操作涉及动画队列。因为您传递的回调不会像调用好的动画回调那样调用.dequeue()，所以.fadeOut()操作不会被调用。

如果添加.dequeue()内回调，那么它的工作原理：

image.queue(function(){ 
    $(this).fadeOut(3000).dequeue(); 
});

到.fadeOut()呼叫说：“添加淡出操作到队列”。然后调用.dequeue()，你的回调声明自己完成了，所以动画可以继续下一步：淡出。

你也可以写你的代码，使使用jQuery的回调传递给您的自定义动画功能：

image.queue(function(next) { 
    $(this).fadeOut(3000); 
    next(); 
});

来源

2015-07-20 14:02:37 Pointy

@Pointy ...还有一个问题呢？我更新了JSfiddle，第二次更改了body和div的颜色，但它们没有效果。任何想法为什么？我必须将这些行动出院才能出现。令人困惑...... – swingMan

@swingMan你放入队列**的任何动画函数必须**通过调用适当的选择器上的'.dequeue（）'或使用'next'来明确地向动画机制宣告它已完成，回电话。如果你排队的功能没有这样做，那么它堵塞了动画队列。 – Pointy

非常感谢Pointy。非常好知道。希望我的书能像你一样解释它。 +1。 – swingMan

为什么JQuery要求我显式地将排队的图像淡出？

回答

相关问题