Agregar efecto easing a slider

[juancile]

Hola a todos!
Estoy usando un slider en el que pasan dos imágenes con efecto slide, y le quiero agregar el efecto easing para darle un movimiento más real. El slider está basado en este plugin: Slider Plugin.
Este es el código del plugin:

Código HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
<script type="text/javascript" src="js/cycle.js"></script> 
<script type="text/javascript"> 
$(document).ready( function($) {
$('#slider').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
timeout: 5000,
});
});
</script> 

El HTML:

Código HTML:

<div id="slider"> 

<!-- slider --> 
<div class="slider">
<div id="image-slider1" class="slider_content"></div>
</div>

<!-- slider --> 
<div class="slider">
<div id="image-slider2" class="slider_content"></div>
</div>

</div> 

He intentado agregarle este código, pero no funciona:

Código HTML:

$(this)
            .animate(
                { left: 200 }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                })
            .animate(
                { left: 0 }, {
 
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
    });

Cómo lo puedo acomodar? Muchas gracias!

[Naahuel]

Ese no es el código del plugin, es la iniciación del plugin.

Primero necesitás descargarte el plugin para funciones de easing: http://gsgd.co.uk/sandbox/jquery/easing/ (que estimo que ya los has hecho).

Revisando el código fuente del plugin que pasaste, dice ahí que soporta estos argumentos:

easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition

Es decir, un suavizado de entrada y de salida. Lo que deberías hacer entonces es:

Código Javascript:

$(document).ready( function($) {
    $('#slider').cycle({
        fx: 'scrollHorz',
        speed: 500,
        pause: 1,
        timeout: 5000,
        easeIn: 'easeOutBack',
        easeOut : 'easeOutBack'
    });
});
 

Este código tiene que estar luego de que incluyas jQuery Easing Plugin, o si no las funciones de suavizado no existirán.

[juancile]

Hola Naahuel!
Funciona perfecto! Muchas gracias!
Y si quisiera que tenga el efecto easing pero que no sea Back?

[Naahuel]

En el sitio web tenés ejemplos:

http://gsgd.co.uk/sandbox/jquery/easing/

En Examples tenés dos combos. Uno para el easing de entrada y el otro de salida. Probá los que más te gusten o simplemente andá probandolos en tu script. Podés combinar una para entrada y otra de salida diferente.

[juancile]

Perfecto!
Todo genial y andando..
Otra cosa, podré insertarle swf en lugar de imagenes al slider?

[Naahuel]

Y no sé, dependerá del plugin. Leí rápido en el sitio y parece ser un slider de imágenes así que probablemente no, pero no sé, hacé la prueba.

[juancile]

Hice la prueba, chequeandolo con Firebug, el objeto swf está, pero no me lo muestra :S