Fatal编程技术网
  • javascript/
  • Javascript 为什么JQuery要求我显式地将排队的图像淡出队列？

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

javascript jquery html css

Javascript 为什么JQuery要求我显式地将排队的图像淡出队列？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这里有一个 这演示了一些简单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&

这里有一个

这演示了一些简单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>  


.1分部{
高度：300px；
宽度：20%；
背景色：红色；
浮动：左；
}
试验
第一组
做吧
函数doStuff（）
{
变量body=$（'body'）；
body.clearQueue（）；
body.queue（函数（）{
console.log（'here'）；
css（“背景色”、“黄色”）；
});
var div1=$（'.div1'）；
div1.clearQueue（）；
div1.队列（函数（）{
css（“背景色”、“绿色”）；
});
var image=$（'.image'）；
image.clearQueue（）；
image.queue（函数（）{
美元（本）.fadeOut（3000）}）；
//image.dequeue（）；//没有此步骤，图像不会褪色
}
请注意，单击该按钮时，主体和div1颜色将按预期更改。但是，除非我取消对谷歌图像淡入淡出的dequeue语句的注释，否则图像不会淡入淡出。我很好奇，为什么我不必显式地将前两个操作出列以使其生效，但对于图像淡入淡出，我必须调用出列方法。

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

但是，对于图像使用的回调，回调中请求的操作不涉及动画队列。由于您传递的回调不像好的动画回调那样调用
.dequeue（）
，因此不会调用
.fadeOut（）
操作

如果在回调中添加
.dequeue（）
，则它可以工作：

 image.queue(function(){
     $(this).fadeOut(3000).dequeue();
 });
调用
.fadeOut（）
时说，“将淡出操作添加到队列”。然后调用
.dequeue（）
，您的回调将声明自己已完成，因此动画可以继续下一步：淡出

您还可以编写代码，利用回调jQuery传递到自定义动画函数：

 image.queue(function(next) {
     $(this).fadeOut(3000);
     next();
 });
您能否解释一下，通过动画队列显式地执行这些操作，您试图实现什么？比如，你为什么不直接做
image.fadeOut（3000）直接执行？@Pointy当然可以，但我在一个网页上工作，在以后执行操作之前，我必须将几个操作排队。在设计过程中，我注意到了这种行为，需要在继续之前理解它。@Pointy…还有一个问题吗？我更新了JSFIDLE，第二次更改了主体和div的颜色，但它们没有任何效果。知道为什么吗？我必须把这些操作排出来，让它们出现。混淆…@swingMan任何放在队列上的动画函数都必须通过调用相应选择器上的
.dequeue（）。如果你把一个没有这样做的函数排队，那么它会阻塞动画队列。很高兴知道。但愿我的书能像你一样解释清楚+1.