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 - 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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 2

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

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

javascript arrondi après la virgule

Arrondir nombre Math.round

Javacript, 2 chiffres après la virgule

Votre réponse

Discussions similaires