Question

情景：在ul，li列表中有2个链接：MY INFO和LOG IN 当在链接上使用HOVER时，一个链接必须显示一个框（带有fadeIn动画），其中包含一个表单。当您在链接上进行操作时，其他链接会在框内显示一个按钮（带有淡入淡出动画）。

当用户MOUSEOUT链接“LOG IN”或鼠标输出表单时，表单必须fadeOut。带有按钮的框，当用户MOUSEOUT链接“MY INFO”或鼠标移开框时必须fadeOut。

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

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

参考：检查屏幕顶部的www.conforama.fr，链接是带有图标的“Compte”，它有一个类：“with-hover-menu”。将鼠标悬停在其上时，将显示该表单。当您将链接或表单删除时，表单会消失。我需要相同但有fadeIn。

现在你可以在这个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

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

Answer 2

这是你想要的吗？

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

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

基本上我使用一个计时器让用户允许~100ms将鼠标从LI元素移动到显示的容器....剩下的就是保持状态并确保我们永远不会看到2个容器在任何时候。

Answer 3

好吧，你的问题是鼠标目前还没有离开你的链接去到盒子里。因此，如上所述，框必须消失，以使功能正常工作。

我想到了一些解决方案（我对jQuery不太满意，所以可能有更好的选择）; 1是添加一个bool和一些逻辑来说明盒子是否已经打开然后只监听盒子上的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 vs ClassB）并略微摆弄了css，这样第二个<li>项可以在第一个展开时保持它的位置。哦，并修复了div格式中的一些元素关闭问题。

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

5 个答案: