ToggleClass et jquery-2.2.4.js
ephelya
Messages postés
296
Statut
Membre
-
ephelya Messages postés 296 Statut Membre -
ephelya Messages postés 296 Statut Membre -
Bonjour à tous,
J'ai un script html pour afficher une sidebar avec une fonction toggleClass. Il fonctionne parfaitement avec la librairie jquery-1.12.4.js, comme proposé sur la demo Jquery. Le pb c'est que cette sidebar doit être affichée via par une extension de navigateur. Je n'ai eu aucun pb avec la version Chrome de l'extension, mais Firefox refuse cette librairie, apparemment il faut que j'utilise jquery-2.2.4.js.
Le souci c'est que avec jquery-2.2.4, ma sidebar s'ouvre toujours mais perd complètement l'effet fluide d'ouverture qu'i y avait, elle passe brutalement d'une position à une autre.
Quelqu'un a une idée ? Est-ce que je dois ajouter un effet à ma fonction ? et si oui, comment ? (je débute en jq)
Voici ma fonction :
J'ai un script html pour afficher une sidebar avec une fonction toggleClass. Il fonctionne parfaitement avec la librairie jquery-1.12.4.js, comme proposé sur la demo Jquery. Le pb c'est que cette sidebar doit être affichée via par une extension de navigateur. Je n'ai eu aucun pb avec la version Chrome de l'extension, mais Firefox refuse cette librairie, apparemment il faut que j'utilise jquery-2.2.4.js.
Le souci c'est que avec jquery-2.2.4, ma sidebar s'ouvre toujours mais perd complètement l'effet fluide d'ouverture qu'i y avait, elle passe brutalement d'une position à une autre.
Quelqu'un a une idée ? Est-ce que je dois ajouter un effet à ma fonction ? et si oui, comment ? (je débute en jq)
Voici ma fonction :
<script>
$( function() {
$( "#sublym_toggle" ).on( "click", function() {
$( "#sublym_drawer" ).toggleClass( "sublym_toggled", 500 );
$("#sublym_available_packs").css ("display", "none");
$("#sublym_active_packs").removeClass ("remove");
});
} );
</script>
A voir également:
- ToggleClass et jquery-2.2.4.js
- Js arrondir - Forum Webmastering
- Please enable js and disable any ad blocker ✓ - Forum Services en ligne
- Js/packed.agent.n ✓ - Forum Virus
- Arrondir js ✓ - Forum Windows
- Isset js ✓ - Forum Javascript
1 réponse
Salut,
Il semble que la fonction toggleClass que tu utilise fait partie de jQueryUI : https://api.jqueryui.com/1.12/toggleClass/
Avec la version 2 de jQuery, tu peux essayer d'utiliser la fonction toggle pour avoir un délai d'animation : https://api.jquery.com/toggle/
Par exemple :
Bonne journée,
Il semble que la fonction toggleClass que tu utilise fait partie de jQueryUI : https://api.jqueryui.com/1.12/toggleClass/
Avec la version 2 de jQuery, tu peux essayer d'utiliser la fonction toggle pour avoir un délai d'animation : https://api.jquery.com/toggle/
Par exemple :
$(function() {
$( "#sublym_toggle" ).on( "click", function() {
$( "#sublym_drawer" ).toggle(500, function() {
$( "#sublym_drawer" ).toggleClass("sublym_toggled");
$("#sublym_available_packs").css ("display", "none");
$("#sublym_active_packs").removeClass ("remove");
});
});
});
Bonne journée,
Le souci c'est que ça m'ajoute un display:none et overflow: hidden sur #sublym_drawer qui m'empêchent d'utiliser la sidebar. J'ai vu qu'on pouvait définir display: true / false avec la fonction toggle, mais je n'ai pas su à comment ajouter cette indication dans le code. Help ! :-)
Tu peux sinon essayer la fonction slideToggle() : https://api.jquery.com/slideToggle/
Tu peux également essayer d'inclure jQueryUI afin de faire fonctionner ton premier code et/ou pour corriger l'erreur "easing is not a function" : https://jqueryui.com/download/
Je n'ai pas encore testé l'ajout de jQueryUI, je vais voir ce que ça donne
jQuery UI 1.12.1 c'est précisément la librairie qui a été rejetée par FF,