【问题标题】：jquery slideUp / slideDown weird behaviorjquery slideUp / slideDown奇怪的行为
【发布时间】：2012-10-24 02:50:30
【问题描述】：
我在使用 mouseover 和 mouseout jquery 事件时遇到了我的代码问题。我试过使用 hover() 函数，但是奇怪的行为是一样的，基本上发生的事情是我第一次将鼠标放在 div 上它触发两个事件，然后向下滑动并立即向上滑动我使用的 div 作为菜单的背景，我想要的是保持向下滑动的 div 冻结，直到用户将指针移出...我感谢您提供的任何帮助...这是我的代码，提前致谢
$(document).ready(function(){
$(".slidingDivB").hide();
$(".show_hideB").show();
$('.show_hideB').mouseenter(function(){
$(".slidingDivB").slideDown();
});
$('.show_hideB').mouseout(function(){
$(".slidingDivB").slideUp();
});
});
【问题讨论】：
标签：
jquery
slidedown
slideup
【解决方案2】：
尝试使用 toggle 或 slideToggle 作为 mouseenter。
$(document).ready(function(){
$(".slidingDivB").hide();
$(".show_hideB").show();
$('.show_hideB').mouseenter(function(){
$(".slidingDivB").slideToggle();
});
});
JS Fiddle DEMO
【解决方案3】：
您的两个元素或 div 是一个接一个放置的吗？如果是这样，这是正常行为：当您的鼠标进入 div 2（触发滑动效果）时，它会显示 div 1，但与此同时，它会使 div 2 向下滑动，使其远离您的指针并触发“ mouseout”事件（这反过来又触发了 slideUp...）。
你想创造什么？手风琴效应？您应该将“show_hideB”放置在您的页面中，以使“slidingDivB”的 slideUp/slideDown 不会使其移动，否则，您应该改变您的方法，并可能绑定到 click 事件。 （点击show_hideB会触发滑动效果，当divB移动时，它实际上会触发mouseout事件......）
如果您需要更准确的建议，请提供您的 HTML 代码
【解决方案4】：
好的，这是您可以看到问题的链接
http://porotoestudio.com/a/ana/nmd/espiritu.html
我要做的是创建一个导航栏，所有元素都必须动画，porblem 与背景，slideDivB 在 show_hideB 后面，动画有效，但问题是当我试图在栏和元素上移动，SlidingDivB 开始疯狂地显示和隐藏，我需要它保持静止并在我浏览元素时显示......
这是html代码
<html>
<!--Comienza Botonera-->
<div id="botonera" class="escondido">
<div id="activa-botonera" class="show_hideB"></div>
<div id="fondo-botonera" class="slidingDivB"></div>
<div id="botonera_nivel1" class="typeface-js" style="font-family:GreyscaleBasic">
<a href="espiritu.html"><p>espíritu</p></a>
<p> </p>
<a href="#" class="show_hideS"><p>soluciones</p></a>
<p> </p>
<a href="#" class="show_hideP"><p>proyectos</p></a>
<p> </p>
<a href="#" class="show_hideE"><p>estructura</p></a>
<p> </p>
<a href="#"><p>con-texto</p></a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a href="contactos.html"><p>contactos</p></a>
</div>
<div id="botonera_proyectos" class="slidingDivP">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="proyectos_arq.html">proyectos arquitectónicos</a>
<p> </p>
<a href="proyectos_urb.html">planes y proyectos urbanos</a><br />
<p> </p>
<a href="arquit_pai.html">arquitectura del paisaje</a><br />
<p> </p>
<a href="arquit_int.html">arquitectura interior</a><br />
<p> </p>
<a href="arquit_trans.html">arquitectura del transporte</a><br />
</div>
<div id="proyectos_flecha"class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_soluciones" class="slidingDivS">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="soluciones_arq.html">proyectos arquitectónicos</a><br />
<p> </p>
<a href="soluciones_urb.html">planes y proyectos urbanos</a><br />
<p> </p>
<a href="soluciones_pai.html">arquitectura del paisaje</a><br />
<p> </p>
<a href="soluciones_int.html">arquitectura interior</a><br />
<p> </p>
<a href="soluciones_trans.html">arquitectura del transporte</a>
<br />
</div>
<div id="soluciones_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_estructura" class="slidingDivE">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="somos-historia.html">somos / historia</a><br />
<p> </p>
<a href="mision-vision.html">misión / visión</a><br />
<p> </p>
<a href="#" class="show_hideQ">equipo</a><br />
<br />
</div>
<div id="estructura_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_equipo" class="slidingDivQ">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="gobierno.html">gobierno NMD</a><br />
<p> </p>
<a href="clientes.html">clientes</a><br />
<p> </p>
<a href="fichas.html">fichas</a><br />
<br />
</div>
<div id="equipo_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
</div>
<!--Termina Botonera-->
</html>
这又是wole导航栏的脚本
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDivP").hide();
$(".show_hideP").show();
$('.show_hideP').mouseover(function(){
$(".slidingDivP").slideToggle();
$(".slidingDivS").hide();
$(".slidingDivE").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivS").hide();
$(".show_hideS").show();
$('.show_hideS').mouseover(function(){
$(".slidingDivS").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivE").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivE").hide();
$(".show_hideE").show();
$('.show_hideE').mouseover(function(){
$(".slidingDivE").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivS").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivQ").hide();
$(".show_hideQ").show();
$('.show_hideQ').mouseover(function(){
$(".slidingDivQ").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivS").hide();
});
});
$(document).ready(function(){
$(".slidingDivB").hide();
$(".show_hideB").show();
$('.show_hideB').mouseenter(function(){
$(".slidingDivB").slideDown();
});
$('.show_hideB').mouseleave(function(){
$(".slidingDivB").slideUp();
});
</script>