Question

我正在尝试制作自定义队列你能告诉我我做错了吗？

这是一个代码： 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>

Answer 1

编辑：从jQuery 1.7开始，animate会选择指定自定义队列来添加动画。

这里的问题并不完全清楚，但我想从这个例子来看，你期望队列中的动画在不同的队列中。

这是问题所在。 Animate始终位于fx队列中。我不知道有什么办法把它放在另一个队列上。因此，您在自定义队列中始终看到0的原因是您排队的事情会立即完成。他们只是调用animate（将动画放在fx队列中）并完成。这也是您最初在fx队列中看到4的原因。

解决此问题的一种方法是使用queue:false在自定义队列中运行动画，但随后在该队列中自行处理延迟。例如：

http://jsfiddle.net/jRawX/6/

    $(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, queue:false, complete: next})
        })
        .queue('lolo',function(next){
            $(this).animate({left: 600}, {duration:1000, queue:false, complete: 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)

可能有更好的方法可以做到这一点，我只是把它做了。但我无法找到任何在不同队列上制作动画的方法。

编辑：略微改进，在动画回调中调用下一个。

jQuery - 如何编写自定义队列？

1 个答案: