Jquery .when() comment utiliser?

Question

avoir un peu de mal avec ma jquery (comme d'habitude). J'ai besoin d'une fonction à exécuter seulement après que le premier est terminé, mais j'ai des problèmes avec la syntaxe .. J'ai lu sur .when et callbacks mais je n'arrive pas à le faire fonctionner. Je ne suis pas tout à fait sûr comment formater mes fonctions :-(Toute aide

 $('#buttonone').hover(function() { 
      $('#descriptionone').fadeIn(400);}, 
     function() { 
       $('#descriptionone').fadeOut(400); 
     }); 


     $('#buttontwo').hover(function() { 
      $('#descriptiontwo').fadeIn(400);}, 
     function() { 
      $('#descriptiontwo').fadeOut(400); 
     }); 

Je suis vraiment confus où le .Lorsque va Toute aide serait appréciée :-)

modifier?: désolé de la confusion, je voulais dire que j'ai besoin de la deuxième fonction où '#buttontwo' hovers doit s'exécuter après la première fonction où '#buttonone' plane! Le problème en ce moment est qu'il s'exécute avant que le premier ne disparaisse et qu'il se chevauche! Merci!

Answer 1

.when est habituellement utilisé pour des événements asynchrones comme ajax, alors essayez d'utiliser la fonction de rappel fadeIn:

$('#buttonone').hover(function() { 
    $('#descriptiontone').fadeIn(
     400, 
     function() { // executed after fadeIn completes 
      buttontwoHover(); 
     } 
    ), 
    function() { 
     $('#descriptionone').fadeOut(400); 
    }); 
}); 

function buttontwoHover(){ 
    $('#buttontwo').hover(function() { 
     $('#descriptiontwo').fadeIn(400);}, 
    function() { 
     $('#descriptiontwo').fadeOut(400); 
    }); 
} 

Answer 2

Vous n'avez pas besoin d'utiliser des promesses ici: fadeIn prend un rappel comme second argument et ce rappel est exécuté lorsque l'évanouissement est terminé.

$('#buttontwo').hover(function() { 
    $('#descriptiontwo').fadeIn(
     400, 
     function() { // executed after fadeIn completes 
      $('#descriptiontwo').fadeOut(400); 
     } 
    ); 
}); 

Answer 3

$('#buttonone').hover(function() { 
$('#descriptionone').fadeIn(
    400, 
    function() { 
      $('#buttontwo').trigger('hover');//trigger the second hover function in callback 
    } 
); 
}); 

Answer 4

DEMO

Essayez cette

Je suppose que cela c'est quoi yo tu as besoin.

var a = false; 
$('#buttonone').hover(function() { 
    $('#descriptionone').fadeIn(400); 
    a = true; 
}, 

function() { 
    $('#descriptionone').fadeOut(400); 

}); 

$('#buttontwo').hover(function() { 
    if (a == true) { 
     $('#descriptiontwo').fadeIn(400); 
    } 
}, 

function() { 
    if (a == true) { 
     $('#descriptiontwo').fadeOut(400); 
    } 
    a = false; 
}); 

Hope this helps, Merci