简单的 jQuery fadeIn fadeOut 动画 - 如何显示/隐藏 DIVS？

Question

场景： 在 ul、li 列表中有 2 个链接：我的信息和登录 当在链接上使用 HOVER 时，一个链接必须显示一个带有内部表单的框（带有淡入动画）。 当您将鼠标悬停在链接上时，其他链接会在框内显示一个按钮（带有淡入淡出动画）。

当用户鼠标退出链接“登录”或鼠标离开表单时，表单必须淡出。 带有按钮的框，当用户鼠标移出“我的信息”链接或鼠标移出框时，必须淡出。

问题（两者相同）： 当 MOUSEOUT 链接 MY INFO 时，表格消失。 MOUSEOUT链接LOG IN时，div内的按钮消失。

注意： 1/当鼠标在链接或表格上时，表格必须可见 2/当鼠标在链接或带按钮的盒子上时，带按钮的盒子必须可见

参考： 检查屏幕顶部的 www.conforama.fr，链接是带有图标的“Compte”，它有一个类：“with-hover-menu”。当您将鼠标悬停在它上面时，将出现该表单。当您将鼠标移出链接或表单时，表单将消失。我需要同样的，但要使用淡入淡出。

现在你可以在这个 jsfiddle 中查看下面的代码：http://jsfiddle.net/75HYL/19/ 但它根本不起作用。我不知道如何实现这一点。想了解和学习...！！

<ul class="links">
    <li class="classA"><a><span>My info</span></a></li>
    <li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
    <input type ="button" value="OKAY"/>
    <div id="login" >
        <div class="form">
            <form>
                <input type="textfield" value="enter your email"></input>
                <input type="checkbox"><option>remember me? </option><input>
                <input type="button" value="Click me"/>
            </form>
        </div>
    </div>
</div>
<style>
    .links li { display:inline-block;cursor:pointer; }
    .links li { padding:0 4px 0 1px; }
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classA span {}
    .links li.classB span {}
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
    $("li.classA").hover(function() {
        $("#userInfo").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#userInfo").fadeOut('fast').css('display', 'none');
    });

    $("li.classB").hover(function() {
        $("#login").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#login").fadeOut('fast').css('display', 'none');
    });
</script>

Answer 1

这就是你想要的？

http://jsfiddle.net/WcUFe/3/

我只更改了 js，以便更容易看到差异。为了更轻松的生活，应该更改 cssand/或 html，并且所有代码都可以放在一个单独的插件中，这将控制整个节目。

基本上，我使用一个计时器来允许用户在大约 100 毫秒内将鼠标从 LI 元素移动到显示的容器......所有其余部分都很难维持状态并确保我们永远不会看到 2 个容器随时。

Answer 2

有点像this？清理了一些语法错误并稍微改变了逻辑

Answer 3

您的问题是鼠标当前必须离开您的链接才能到达框。因此，这些框必须消失才能使功能如您上述那样工作。

我想到了一些解决方案（我不擅长使用 jQuery，所以可能会有更好的选择）； 1 是添加一个布尔值和一些逻辑来说明盒子是否已打开，然后只监听盒子上的 mouseout 事件（而不是链接和盒子）。另一个是对事件进行去抖动，以便在您侦听链接的 mouseout 事件之前有一点时间延迟。

• 看起来@AbstractChaos 现在已经解决了这个问题，因为我怀疑我的建议有更好的选择！

希望这会有所帮助。

Answer 4

或

$("li.classA").hover(function() {
    $("#login").css('display', 'none');
    $("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
    $("#userInfo").fadeOut('fast');
});


$("li.classB").hover(function() {
    $("#userInfo").css('display', 'none');
    $("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
    $("#login").fadeOut('fast');
});

Answer 5

试试这个： http://jsfiddle.net/QR49h/

我将要隐藏/显示的 div 移动到 <li> 元素内：

<ul class="links">
    <li class="classA"><a><span>My info</span></a>
        <div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
            <br/>
            <input type="button" value="OKAY" />
        </div>
    </li>
    <li class="classB"><a><span>Log in</span></a>
        <div id="login">
            <div class="form">
                <form>
                    <input type="textfield" value="enter your email" />
                    <input type="checkbox" />
                    <option>remember me?</option>
                        <input />
                    <input type="button" value="Click me" />
                </form>
            </div>
        </div>
    </li>
</ul>

我还修复了 js 中的一个错误（ClassA 与 ClassB）并稍微调整了 css，以便第二个 <li> 项目可以在第一个展开时保持其位置。哦，并修复了表单 div 中的一些元素关闭问题。