jquery - 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 去哪儿了！任何帮助，将不胜感激 ：-）

编辑：对混乱感到抱歉，我的意思是我需要在“#buttonone”悬停的第一个函数之后执行“#buttontwo”悬停的第二个函数！现在的问题是它在第一个完成淡出之前执行并且它是重叠的！谢谢！

Answer 1

演示

尝试这个

我想这就是你需要的。

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

希望这有帮助，谢谢

Answer 2

你不需要在这里使用 Promise：fadeIn将回调作为第二个参数，并且在淡入淡出完成时执行此回调。

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

Answer 3

.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 4

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