2016-11-24 2 views
0

Je m'anime dans un élément qui a assez de contenu pour que la hauteur totale de la div soit atteinte.Javascript Promise sur JQuery addClass

La div en question utilise un JQuery vegas background slider pour faire pivoter certaines images. Non, je m'anime dans l'élément sur un événement click et utilise le javascript suivant:

function loadSpecification() { 
     hideAll(); 
     $("#specification").removeClass("hidden").addClass("show", { 
      complete: function() { 
       console.log("completed animation"); 
       loadVegas(); 
      } 
     }); 
    } 

où la fonction loadVegas() recharge l'élément Vegas afin de fixer la lame pour recouvrir la div nouvellement étendu.

Cependant, la fonction complète n'est pas déclenchée dans ce cas, est-ce que je l'invoque correctement? Si oui, qu'est-ce qui ne va pas ici s'il vous plait?

Mes classes css sont les suivantes:

.hidden { 
    display: none; 
    opacity: 0; 
    width: 0; 
    transition: opacity 1s ease; 
    -webkit-transition: opacity 1s ease; 
    -moz-transition: opacity 1s ease; 
} 

.show { 
    display: block; 
    opacity:1; 
    margin-bottom:10px; 
    /*width: inherit;*/ 
} 
+1

Je ne pense pas que addClass a toute signature avec une classe et un rappel. Je suis assez sûr que c'est juste en ajoutant la classe de manière synchrone – Axnyff

+0

http://stackoverflow.com/questions/7134584/how-do-i-use-transitionend-in-jquery – DaniP

+0

Possible dupliquer de [Comment ajouter une fonction de rappel à la méthode addClass de jQuery?] (http://stackoverflow.com/questions/14567990/how-to-add-a-callback-function-to-the-addclass-method-of-jquery) – Alex

Répondre

4

fonctionne très bien, pensez à ajouter la bibliothèque jQuery UI que la fonction complète est pas implémentée dans jQuery mais dans jQuery UI. Voir docs pour plus d'informations.

$("#specification").removeClass("hidden").addClass("show", { 
 
    complete: function() { 
 
    console.log("completed animation"); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="specification">test</div>

+0

ajoutant une bibliothèque entière pour une fonction est un peu de surcharge, n'est-ce pas? – Alex

+0

@Alex Je viens de répondre à une question. Frais généraux ou non, ce n'est pas un sujet de question. Je suis d'accord cependant, c'est un énorme frais généraux. – Linek

+0

Je ne faisais que le mentionner, pas grand chose :) cette question a été répondu tant de fois sans avoir besoin de charger jquery ui, donc je me sens juste que ce n'est pas une bonne pratique. Et c'est bien de dire ça, n'est-ce pas? :) Votre aspiration ne doit pas seulement être de trouver une solution, mais peut-être aussi une bonne solution - surtout si elle a été mentionnée tant de fois auparavant ... – Alex