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

场景：获得UL的名单内2个链接，李：我的信息并登录一个环节必须表现出箱（带淡入动画）与链路上使用HOVER里面的时候的一种形式。当您在链接上进行HOVER时，其他链接会在框中显示一个按钮（使用淡入动画）。简单的jQuery fadeIn fadeOut动画 - 如何显示/隐藏DIVS？

表格必须淡出形式的链接“LOG IN”或鼠标移开时用户鼠标移开。带有按钮的方框，当用户MOUSEOUT的链接“我的信息”或鼠标悬停时，必须淡出。

问题（两者相同）：形式在前看不见当鼠标移开链接MY INFO。当MOUSEOUT链接登录时，div内的按钮消失。

注： 1 /形式必须是可见当鼠标按键被链接或在FORM 2 /与按钮框必须是可见的WHEN鼠标位于链接或与按钮

引用盒：查看屏幕最顶部的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>

来源

2012-06-11 mlclm

这是你想要的吗？

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

我只改变了JS，更容易看到的差异。为了更轻松的生活，cssand/html应该被修改，并且所有的代码都可以放在一个单独的插件中，以控制整个演出。

基本上我使用计时器，以允许用户〜100ms的鼠标从LI元件移动到所显示的容器....其余的都是为了维持这个状态，并确保我们永远不会在任何时候看到2个容器。

来源

2012-06-11 11:47:23 Quamis

非常感谢我从来没有想过100毫秒的技巧，即它几乎是它，但在您的脚本中，如果用户离开链接“登录”或“我的信息”，该框保持可见。例如，在“我的信息”框中显示鼠标，然后将鼠标移至右侧，框仍然存在。它应该fadeOut，就像鼠标离开盒子时一样。 – mlclm

http://jsfiddle.net/WcUFe/2/ mouseLeave事件被附加到错误的元素:)他们应该被附加到李元素，并容器... :)我复制/粘贴和附加两次到容器，并且一次到LI .. – Quamis

这似乎做了窍门。谢谢！将查找和研究你的代码。感谢您的帮助:) – mlclm

有点像this？清理一些语法错误和变化逻辑有点

来源

2012-06-11 11:37:33 AbstractChaos

不错，但我在这里看到2个错误：1）如果您从我的信息中移动鼠标，然后在登录时向右移动，则2个框显示一个在另一个之下。 2）如果你的鼠标悬停在“登录”框显示没问题，那么你将鼠标移出链接“登录”，框仍然在这里。它应该fadeOut。 – mlclm

嗯，你的问题是，鼠标目前有离开你的链接获得在箱子上。因此，必须按照上面所述的方式工作，才能正常工作。想到几个解决方案（我对jQuery并不擅长，所以可能会有更好的选择）; 1是添加一个bool和一些逻辑来说明盒子是否已经打开，然后只在盒子（而不是链接和盒子）上监听鼠标事件。另一种方法是消除事件，以便在收听链接的鼠标事件之前有一段时间的延迟。

看起来像@AbstractChaos已经清除了现在，因为我怀疑有更好的选择给我的建议！

希望这会有所帮助。

来源

2012-06-11 11:41:09

谢谢，我apprecaite你的想法。 – mlclm

或

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

来源

2012-06-11 11:41:21

尝试这种情况：

<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的）中的错误和拨弄： http://jsfiddle.net/QR49h/

我提出的div被隐藏/显示给<li>元件内部第一个展开时，css略有第二个<li>项目可以保持它的位置。哦，并修正了div格式中的一些元素关闭问题。

来源

2014-02-26 16:24:11 Starscream1984

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

回答

相关问题