ToggleClass et jquery-2.2.4.js
ephelya
Messages postés
282
Date d'inscription
Statut
Membre
Dernière intervention
-
ephelya Messages postés 282 Date d'inscription Statut Membre Dernière intervention -
ephelya Messages postés 282 Date d'inscription Statut Membre Dernière intervention -
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
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Arrondi js ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Js/kryptik.ad ✓ - Forum Virus
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,