Se necesita ayuda para personalizar Jquery Text Animation

Tengo este animador de texto deslizante jquery. Si miras el ejemplo (http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), el texto activo que vuela vuelve a desaparecer después de haber hecho su entrada. Me gustaría que cada texto animado permanezca allí después de aparecer y espere hasta que aparezca todo el texto, luego todo el texto debería desaparecer y reiniciarse nuevamente (así que, básicamente, en lugar de que cada texto desaparezca después de volar, debería permanecer visible solo hasta el último texto ha aparecido el elemento, luego reinicie todo)

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $('.container .flying-text').css({
        opacity: 0
    });
    $('.container .active-text').animate({
        opacity: 1,
        marginLeft: "250px"
    }, 4000);
    var int = setInterval(changeText, 5000);
    function changeText() {
        var $activeText = $(".container .active-text");
        var $nextText = $activeText.next();
        if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
        $activeText.animate({
            opacity: 0
        }, 1000);
        $activeText.animate({
            marginLeft: "-100px"
        });
        $nextText.css({
            opacity: 0
        }).addClass('active-text').animate({
            opacity: 1,
            marginLeft: "250px"
        }, 3000, function() {
            $activeText.removeClass('active-text');
        });
    }
});​
</script>

CO

.container{

    width:500px;
    margin:0 auto;
    color:#FFF;
    overflow:hidden;
    }

    .flying-text{
    margin-left:-100px;
    color: #fff;
  }

HTML

<div class="container">
    <div class="flying-text active-text">I believe</div>                        
    <div class="flying-text">I can</div>                        
    <div class="flying-text">Fly</div>                      
</div>

Gracias por cualquier ayuda

preguntado el 12 de junio de 12 a las 21:06

1 Respuestas

Debe mover el código de desvanecimiento que se ejecuta cada vez.

function changeText() {

    var $activeText = $(".container .active-text");

    var $nextText = $activeText.next();
    if ($activeText.next().length == 0) {
        $nextText = $('.container .flying-text:first');

        // To fade all out _ MOVED FROM OUTSIDE THIS IF
        var $allText = $(".container div");
        $allText .animate({
            opacity: 0
        }, 1000);
        $allText .animate({
            marginLeft: "-100px"
        });
    }

    $nextText.css({
        opacity: 0
    }).addClass('active-text').animate({
        opacity: 1,
        marginLeft: "250px"
    }, 3000, function() {
        $activeText.removeClass('active-text');
    });
}​

Aquí hay una jsFiddle para ilustrar.

ACTUALIZACIÓN
Basado en algunos comentarios, actualicé el violín para mostrar cómo podría usar los efectos de jQuery UI.

Respondido el 13 de junio de 12 a las 21:06

Impresionante. Muchísimas gracias. Realmente aprecio tu ayuda. ¿Quizás sabes cómo animar el texto para que implosione en lugar de que se deslice? ¿O es muy diferente del código usado aquí? - Diestro Dave

¿Alguna forma de detener la animación al pasar el cursor sobre el texto? - Diestro Dave

@DextrousDave - De nada. Verificar .detener() y alternar efectos. No hay efecto de implosión, solo una explosión, aunque podría haber un complemento para un efecto de implosión en alguna parte. - Tim Hobbs

Entonces, el efecto de explosión se puede hacer con la función .animate, ¿verdad? Gracias por tu ayuda de nuevo, super! útil - Diestro Dave

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