jquery - jQuery在悬停时向上/向下滑动

Question

我需要做，div“更改”等待结束，向下滑动 div“用户名”并开始向上滑动，悬停时相同

演示：http: //jsfiddle.net/2jHBQ/3/

 <div id="avatar">
        <div id="username">Madona</div>
        <div id="change">Change profile</div>
    </div>

$("#avatar").hover(function () {

    $("#username").slideToggle(250);
     $("#change").slideToggle(250);
});

Answer 1

如果我正确理解您的问题，事件的缩进过程是：

• #avatar悬停
  1. #username滑下并隐藏
  2. #change显示并向上滑动
• #avatar未悬停
  1. #change滑下并隐藏
  2. #username显示并向上滑动

在这种情况下，您需要两个不同的处理程序（一个用于鼠标进入，一个用于鼠标离开），因为顺序是相反的。

$("#avatar").hover(function () {
    $("#username").slideToggle(250, function () {
        $("#change").slideToggle(250);
    });
}, function () {
    $("#change").slideToggle(250, function () {
        $("#username").slideToggle(250);
    });
});

Answer 2

您必须使用slideToggle()的回调，如果您还希望它退出，您还需要指定hover()方法的 handlerOut 函数，只是以相反的顺序，类似于：

$("#avatar").hover(function () {
    $("#username").slideToggle(250, function () {
        $("#change").slideToggle(250);
    });
}, function () {
    $("#change").slideToggle(250, function () {
        $("#username").slideToggle(250);
    });
});

演示- 一个接一个地滑动 - 双向

Answer 3

您可以使用 .delay() 方法。如您所见，它在这里工作得很好：

http://jsfiddle.net/2jHBQ/4/

$("#avatar").hover(function () {

    $("#username").slideToggle(250);
     $("#change").delay(250).slideToggle(250);
});

您可以在此处准备 API：http: //api.jquery.com/delay/

Answer 4

不知道我是否明白你想要什么。尝试这个？

    $("#avatar").hover(function () {
$("#username").slideToggle(250,function () {
        $("#change").slideToggle(250);
    });  

});

或者你可以使用.mouseenter()