JQuery - как написать пользовательскую очередь? - PullRequest
Новая
       4

JQuery - как написать пользовательскую очередь?

2 голосов
/ 10 мая 2011

я пытаюсь создать собственную очередь, не могли бы вы сказать мне, что я делаю неправильно?

вот код в действии: 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>

1 Ответ

1 голос
/ 11 мая 2011

РЕДАКТИРОВАТЬ: Начиная с jQuery 1.7, animate действительно имеет возможность указать пользовательскую очередь для добавления анимации.

Не совсем понятно, в чем проблемаздесь, но я думаю, что, глядя на пример, вы ожидаете, что анимации в очереди будут находиться в другой очереди.

Вот проблема.Animate всегда идет в очередь FX.Я не знаю ни одного способа поставить его в другую очередь.Таким образом, причина, по которой вы всегда видите 0 в своей пользовательской очереди, заключается в том, что вещи, которые вы ставите в очередь, сразу же заканчиваются.Они просто вызывают animate (помещая анимацию в очередь FX) и заканчивают работу.Это также, почему вы видите 4 изначально в очереди FX.

Одним из способов решения этой проблемы является запуск анимации в пользовательской очереди с помощью 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)

Возможно, есть лучший способ сделать это, я только что придумал этот.Но мне не удалось найти какой-либо способ анимировать в другой очереди.

РЕДАКТИРОВАТЬ: немного улучшена, следующий вызов по обратному вызову анимации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...