Question

我的jquery有点麻烦（像往常一样）。我需要一个函数只在第一个函数完成后才能执行，但是我的语法有问题。我一直在阅读.when和callbacks但我似乎无法让它工作。我不太确定如何格式化我的功能:-(任何帮助？

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

您不需要在此处使用promises：fadeIn将回调作为第二个参数，并在淡入淡出完成时执行此回调。

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

Answer 2

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

希望这有帮助，谢谢

Jquery .when（）如何使用？

4 个答案: