web-dev-qa-db-fra.com

Basculer div avec soulagement

J'ai un lien, lorsque je clique sur celui-ci, je veux qu'un div se glisse avec un soulagement, puis en cliquant de nouveau sur le lien, il devrait fermer le div, avec un soulagement ...

J'ai consulté le plug-in de jQuery easing, mais cela ne fonctionne pas avec jQuery 1.5.1? Des idées à ce que je peux faire, et comment? 

À l'heure actuelle, je n'ai qu'une fonction slideToggle, qui n'a pas été assouplie? 

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

la documentation jQuery slideToggle () dit:

.slideToggle ([durée], [détente], [rappel]) (version ajoutée: 1.4.3)

duration Chaîne ou nombre déterminant la durée d'exécution de l'animation.

easing Chaîne indiquant la fonction d'accélération à utiliser pour la transition.

callback Une fonction à appeler une fois l'animation terminée.

Comme vous pouvez le constater, il existe un paramètre appelé [ easing ], dont la description est la suivante:

Accélération

A partir de jQuery 1.4.3, une chaîne optionnelle nommant une fonction d'accélération peut être utilisée. Les fonctions d'accélération spécifient la vitesse à laquelle l'animation progresse à différents moments de l'animation. Les seules implémentations d'assouplissement dans la bibliothèque jQuery sont les implémentations par défaut, appelées swing, et celles qui progressent à un rythme constant, appelées linear. Des fonctions d'accélération supplémentaires sont disponibles avec l'utilisation de plug-ins, notamment la suite jQuery UI .

Donc vous avez 2 choix:

1) Vous utilisez un des assouplissements disponibles:

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

2) Vous incluez jQuery UI dans votre page et utilisez un de ses 32 assouplissements :

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

Vous pouvez voir un exemple de jsFiddle ici

30
Sylvain

J'ai un lien, voici un exemple pour différents types d'effets à bascule.

Basculer div avec différents effets - Jquery Démo en direct

Sélectionnez le type d'effet dans le menu déroulant et, lorsque vous cliquez, vous obtenez un effet de bascule beaucoup plus esthétique.

J'ai essayé, ça marche 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>
0
Bharath Kumaar