jQuery: ¿cómo escribir una cola personalizada?

Estoy tratando de hacer una cola personalizada, ¿podrías decirme qué estoy haciendo mal?

aquí está el código en acción: 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>

preguntado el 10 de mayo de 11 a las 13:05

1 Respuestas

EDIT: A partir de jQuery 1.7, animate toma una opción para especificar una cola personalizada para agregar la animación.


No está del todo claro cuál es el problema aquí, pero creo que al mirar el ejemplo, espera que las animaciones dentro de la cola estén en una cola diferente.

Aquí está el problema. Animate siempre va a la cola de efectos. No conozco ninguna forma de ponerlo en otra cola. Por lo tanto, la razón por la que siempre ve 0 en su cola personalizada es que las cosas que está haciendo en ella terminan de inmediato. Simplemente llaman a animate (poniendo la animación en la cola de efectos) y terminan. Esta es también la razón por la que está viendo 4 inicialmente en la cola de efectos.

Una forma de evitar esto es ejecutar las animaciones en su cola personalizada con queue:false, pero luego maneje los retrasos usted mismo en esa cola. Por ejemplo:

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)

Puede que haya una mejor manera de hacer esto, acabo de inventar esta. Pero no pude encontrar ninguna forma de animar en una cola diferente.

EDITAR: mejorado ligeramente, llamando a continuación a la devolución de llamada animada.

Respondido 09 Abr '13, 00:04

gracias, funciona como un encanto! para mi proyecto actual es más que suficiente. aún así, espero encontrar una manera de hacer algo como .animate ('lolo', {left: 100}, 1000) ... - Asaf Katz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.