Question

我需要做，div＆＃34;改变＆＃34;等待结束，滑入div＆＃34;用户名＆＃34;并开始滑动，同样在悬停

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

DEMO - 一个接一个地滑动 - 两种方式

Answer 3

不确定我是否理解你想要的东西。试试这个？

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

});

或者您可以使用.mouseenter()

Answer 4

您可以使用.delay（）方法。你可以看到它在这里工作得很好：

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

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

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

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

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

4 个答案: