JQuery .when() как использовать?

Question

с небольшим количеством проблем с моим jquery (как обычно). Мне нужно, чтобы одна функция выполнялась только после завершения первого, но у меня возникают проблемы с синтаксисом. Я читал о .when и обратных вызовах, но я не могу заставить его работать. Я не совсем уверен, как форматировать функции :-(Любая помощь

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


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

Я просто действительно путают, где .when идет Любая помощь будет оценена :-)

редактировать?!: жаль насчет путаницы, я имел в виду, что мне нужна вторая функция, где «#buttontwo» зависает, нужно выполнить после первой функции, где «#buttonone» зависает! Проблема прямо сейчас в том, что она выполняется до того, как первый закончен, и он перекрывается! Благодаря!

Answer 1

.when обычно используется для асинхронных событий, таких как AJAX, поэтому попробуйте использовать 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

Вам не нужно использовать обещания здесь: fadeIn принимает обратный вызов как второй аргумент, и этот обратный вызов выполняется, когда завершение замирания завершено.

$('#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

Попробуйте

Я предполагаю, что это это то, что тебе нужно.

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; 
}); 

Надеется, что это помогает, спасибо