jQuery - 如何编写自定义队列？
我正在尝试创建一个自定义队列， 你能告诉我我做错了什么吗？
这是正在运行的代码： http://dl.dropbox.com/u/1292831/hell/index2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style type="text/css">
.tester {
background:red;
width: 100px;
height: 100px;
left: 900px;
top: 300px;
position: absolute;
}
.counter {
position: absolute;
left: 0;
top: 0;
width: 150px;
font-size: 18px;
}
</style>
<script type="text/javascript">
$(function(){
// animation for the 'FX' queue:
$('.tester').fadeOut(1000).fadeIn(1000)
// animation for the 'lolo' queue:
$('.tester').queue('lolo',function(next){
$(this).animate({left: 100}, {duration:1000})
next()
})
$('.tester').queue('lolo',function(next){
$(this).animate({left: 800}, {duration:1000})
next()
})
.dequeue('lolo')
})
// counters
setInterval(function(){
var count = $('.tester').queue('fx').length
$('.counter #c1').html(count)
var count = $('.tester').queue('lolo').length
$('.counter #c2').html(count)
}, 250)
</script>
</head>
<body>
<p class="counter">
items in the 'fx' queue <span id="c1"></span> <br />
items in the 'lolo' queue <span id="c2"></span>
</p>
<div class="tester"></div>
</body>
</html>
i'm trying to make a custom queue,
could you tell me what i'm doing wrong?
here is a the code in action:
http://dl.dropbox.com/u/1292831/hell/index2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style type="text/css">
.tester {
background:red;
width: 100px;
height: 100px;
left: 900px;
top: 300px;
position: absolute;
}
.counter {
position: absolute;
left: 0;
top: 0;
width: 150px;
font-size: 18px;
}
</style>
<script type="text/javascript">
$(function(){
// animation for the 'FX' queue:
$('.tester').fadeOut(1000).fadeIn(1000)
// animation for the 'lolo' queue:
$('.tester').queue('lolo',function(next){
$(this).animate({left: 100}, {duration:1000})
next()
})
$('.tester').queue('lolo',function(next){
$(this).animate({left: 800}, {duration:1000})
next()
})
.dequeue('lolo')
})
// counters
setInterval(function(){
var count = $('.tester').queue('fx').length
$('.counter #c1').html(count)
var count = $('.tester').queue('lolo').length
$('.counter #c2').html(count)
}, 250)
</script>
</head>
<body>
<p class="counter">
items in the 'fx' queue <span id="c1"></span> <br />
items in the 'lolo' queue <span id="c2"></span>
</p>
<div class="tester"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
编辑：从 jQuery 1.7 开始，
animate确实采用了一个选项来指定要添加动画的自定义队列。目前尚不完全清楚这里的问题是什么，但我认为通过查看示例，您期望队列中的动画位于不同的队列上。
问题就在这里。 Animate 始终位于效果队列中。我不知道有什么方法可以将其放在另一个队列中。因此，您总是在自定义队列上看到 0 的原因是您在队列中排队的事情会立即完成。他们只需调用 animate（将动画放入 fx 队列）并完成即可。这也是您最初在 fx 队列中看到 4 的原因。
解决此问题的一种方法是使用
queue:false在自定义队列中运行动画，然后在该队列中自行处理延迟。例如：http://jsfiddle.net/jRawX/6/
可能有更好的方法做这个，我刚刚做了这个。但我无法找到任何方法在不同的队列上制作动画。
编辑：略有改进，在动画回调上调用下一个。
EDIT: As of jQuery 1.7,
animatedoes take an option to specify a custom queue to add the animation to.It's not entirely clear what the issue here is, but I think from looking at the example, you're expecting the animations within the queue to be on a different queue.
Here's the problem. Animate always goes on the fx queue. I'm not aware of any way to put it on another queue. So, the reason you're always seeing 0 on your custom queue is that the things you are queueing on it finish immediately. They simply call animate (putting the animation on the fx queue) and finish. This is also why you are seeing 4 initially on the fx queue.
One way around this, is to run the animations in your custom queue with
queue:false, but then handle the delays yourself in that queue. For example:http://jsfiddle.net/jRawX/6/
There may be a better way to do this, I just made this one up. But I was unable to find any way to animate on a different queue.
EDIT: Improved slightly, calling next on the animate callback.