简单的jQuery淡入淡出动画 - 如何显示/隐藏DIVS

Simple jQuery fadeIn fadeOut animation - How to show / hide DIVS?

本文关键字：显示 DIVS 隐藏 何显示 jQuery 淡入 淡出 动画 简单      更新时间：2023-09-26

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

当用户鼠标退出

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

问题（两者相同）：当鼠标退出链接我的信息时，表单消失了。div 内的按钮在鼠标退出链接登录时消失。

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

参考：检查屏幕最顶部的 www.conforama.fr，链接是带有图标的"帐户"，它有一个类："带悬停菜单" .当您将鼠标悬停在它上面时，将显示表单。当您将鼠标悬停在链接或表单上时，表单会消失。我需要相同的，但有淡入。

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

这就是你想要的？

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

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

基本上我使用计时器允许用户~100ms将鼠标从LI元素移动到显示的容器。其余的都是维护状态并确保我们在任何时候都不会看到 2 个容器的麻烦。

有点像这样？ 清理了一些语法错误并稍微更改了逻辑

好吧，您的问题是鼠标当前必须离开您的链接才能进入框。 因此，盒子必须消失才能使功能像您上面所说的那样工作。

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

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

希望这有帮助。

或 

$("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');
});

试试这个：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中的一些元素关闭问题。

相关文章：