ToggleClass et jquery-2.2.4.js

Fermé

ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - 7 oct. 2016 à 14:11
ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - 7 oct. 2016 à 19:02

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 :


	<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:

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 oct. 2016 à 14:55

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 :

$(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,

ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
7 oct. 2016 à 15:43

Merci pour cette réponse, c'est intéressant, on progresse, il y a bien un effet apparemment. :-)
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 ! :-)

ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
7 oct. 2016 à 16:09

par ailleurs, toggle réduit la taille de ma sidebar en diminuant sa hauteur et sa largeur, jusqu'à la cacher en haut à droite, mais moi je voudrais juste un effet slide. Or quand j'ajoute "slide" à la fonction toggle, ça fait planter le script et j'ai cette erreur dans la console

TypeError: jQuery.easing[this.easing] is not a function
[En savoir plus]

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 oct. 2016 à 16:38

La fonction toggle() n'est peut-être pas la bonne solution du coup.
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/

ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
7 oct. 2016 à 16:42

avec slidetoggle, j'ai toujours le même problème de display: none, et puis le slide se fait de bas en haut et non de gauche à droite comme je voudrais...
Je n'ai pas encore testé l'ajout de jQueryUI, je vais voir ce que ça donne

ephelya Messages postés 282 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
7 oct. 2016 à 16:46

FF
jQuery UI 1.12.1 c'est précisément la librairie qui a été rejetée par FF,

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

Arrondir nombre Math.round

remplir une case de tableau avec une couleur grise avec texture de pointillés