jquery - 在执行下一个操作之前让 jquery 等待

Question

我有这个小提琴。

悬停时：第二个 div 必须向下滑动，然后是第三个 div。

当悬停丢失时：第三个 div 必须向上滑动，然后是第二个 div。

我该怎么做？

http://jsfiddle.net/sExNS/6/

$(document).ready(function(){
  $(".signincontainer").hover(function(){
      $(".myprofile").slideToggle(function(){
        $(".logout").slideToggle();
      });
  });
});

Answer 1

尝试这个

$(".myprofile").slideToggle(function () {
    $(".logout").slideToggle();
});

演示

更新

$('.signincontainer').hover(function () {
    $(".myprofile").slideToggle(function () {
        $(".logout").slideToggle();
    })
}, function () {
    $(".logout").slideToggle(function () {
        $(".myprofile").slideToggle();
    });
});

演示

Answer 2

    $(document).ready(function(){
      $(".signincontainer").hover(function(){// work at mouse enter
          $(".myprofile").slideToggle(function(){
          $(".logout").slideToggle();
          });
      },function(){
           $(".logout").slideToggle(function(){// work at mouse out
          $(".myprofile").slideToggle();
          });
});
    });

看演示

参考幻灯片切换 ，悬停

Answer 3

你可以使用回调函数，就像这样。

$(document).ready(function(){
  $(".signincontainer").hover(function(){
    $(".myprofile").slideToggle(function(){
      $(".logout").slideToggle();});
  });
});

看看那个小提琴

如果您想要鼠标离开时的正确顺序，请这样做

$(document).ready(function(){
  $(".signincontainer").hover(function(){
      $(".myprofile").slideDown(function(){$(".logout").slideDown();});
  }, function(){
      $(".logout").slideUp(function(){$(".myprofile").slideUp();});
  });
});

Answer 4

尝试这样的事情，小提琴

$(document).ready(function () {
    $(".signincontainer").hover(
         function() {
             $(".myprofile").slideToggle(function () {
            $(".logout").slideToggle();
        });
        }, function() {
             $(".logout").slideToggle(function () {
            $(".myprofile").slideToggle();
            });
        }
    );

});