jquery - animate - Alternar div con easing

jquery ui toggle

Question

Tengo un enlace, cuando hago clic en este quiero un div para deslizar con easing, y luego hacer clic en el enlace de nuevo, debe cerrar el div, con easing ...

He examinado el plugin jQuery easing, pero no funciona con jQuery 1.5.1. ¿Alguna idea de lo que puedo hacer y cómo?

En este momento, solo tengo una función slideToggle, que no tiene easing?

$(''.open-mypage'').click(function () {
    $(''#mypage-info'').slideToggle(''2000'', function () {
        // Animation complete.
    });
});

Answer 1

La documentación de jQuery slideToggle () dice:

.slideToggle ([duration], [easing], [callback]) ( versión agregada: 1.4.3 )

duración Una cadena o número que determina cuánto tiempo se ejecutará la animación.

easing Una cadena que indica qué función de relajación utilizar para la transición.

devolución de llamada Una función para llamar una vez que se completa la animación.

Como puede ver, hay un parámetro llamado [ easing ] , su descripción es:

Easing

A partir de jQuery 1.4.3, se puede usar una cadena opcional que nombra una función de aceleración. Las funciones de aceleración especifican la velocidad a la que progresa la animación en diferentes puntos dentro de la animación. Las únicas implementaciones de facilitación en la biblioteca jQuery son las predeterminadas, llamadas swing , y una que progresa a un ritmo constante, llamada linear . Hay más funciones de aceleración disponibles con el uso de complementos, especialmente la suite jQuery UI .

Entonces tienes 2 opciones:

1) Utiliza uno de los easing disponibles:

$(''.open-mypage'').click(function () {
    $(''#mypage-info'').slideToggle(''2000'', "swing / linear", function () {
        // Animation complete.
    });
});

2) Usted incluye jQuery UI en su página y usa uno de sus 32 easings :

$(''.open-mypage'').click(function () {
    $(''#mypage-info'').slideToggle(''2000'', "easeOutBounce", function () {
        // Animation complete.
    });
});

Puedes ver un ejemplo jsFiddle aquí

Answer 2

Tengo un enlace. Aquí hay un ejemplo de diferentes tipos de efectos de alternar.

Alternar div con diferentes efectos - demo de Jquery Live

Seleccione el tipo de efecto en el menú desplegable y al hacer clic, esto hace que los efectos de alternar se vean mucho mejor.

Lo he intentado, funciona bien.

$(function () {
    var index = 0;
    $("#btnChangeEffect").click(function () {
        var effectType = $("#effectTypes").val();
        $("#dvContent").toggle(effectType, 600);
    });
});



<select name="effects" id="effectTypes" class="ddl">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>