jquery slideUp/slideDown奇怪的行为_Jquery_Slidedown_Slideup

jquery slideUp/slideDown奇怪的行为

jquery

jquery slideUp/slideDown奇怪的行为,jquery,slidedown,slideup,Jquery,Slidedown,Slideup,我在使用mouseover和mouseout jquery事件时遇到问题。我尝试过使用hover（）函数，但奇怪的行为是一样的，基本上发生的是我第一次将鼠标放在div上时，它会触发两个事件，然后向下滑动，中间向上滑动我用作菜单背景的div，我想要的是保持向下滑动的div冻结，直到用户将指针移出。。。我感谢你能提供的任何帮助。。。这是我的代码，提前谢谢 $(document).ready(function(){ $(".slidingDivB").hide(); $(".show_

我在使用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();
    });
});

跟，跟。尝试用mouseleave替换mouseout

另外，如果您想让我们更具体一些，请发布一个JSFIDLE

为鼠标指针尝试

切换

或

滑动切换

$(document).ready(function(){

    $(".slidingDivB").hide();
    $(".show_hideB").show();    

    $('.show_hideB').mouseenter(function(){
        $(".slidingDivB").slideToggle();
    });

});

您的两个元素或div是一个接一个地放置的吗？如果是这样，这是正常行为：当鼠标进入div 2（触发滑动效果）时，它会显示div 1，但同时，它会使div 2向下滑动，从而使其远离指针并触发“mouseout”事件（反过来，再次触发slideUp…）

你想创造什么？手风琴效果？您应该在页面中放置“show_hideB”，使“slideupdivb”的slideUp/slideDown不会使其移动，或者，您应该更改方法，并可能绑定到单击事件。（点击show_hideB会触发滑动效果，当divB移动时，实际上会触发鼠标移出事件，这一点您不会有任何问题…）

如果您需要更精确的建议，请提供您的HTML代码

好，这是您可以看到问题的链接

我想做的是创建一个导航栏，所有元素都必须设置动画，问题是背景，slideDivB在show_hideB后面，动画可以工作，但问题是当我试图在导航栏和元素上移动时，slideDivB开始疯狂地显示和隐藏，我需要它保持静止，并在我通过元素导航时显示

这是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>&nbsp;</p>
    <a href="#" class="show_hideS"><p>soluciones</p></a>
    <p>&nbsp;</p>
    <a href="#" class="show_hideP"><p>proyectos</p></a>
    <p>&nbsp;</p>    
    <a href="#" class="show_hideE"><p>estructura</p></a>
    <p>&nbsp;</p>
    <a href="#"><p>con-texto</p></a>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</p>
        <a href="proyectos_urb.html">planes y proyectos urbanos</a><br />
        <p>&nbsp;</p>
        <a href="arquit_pai.html">arquitectura del paisaje</a><br />
        <p>&nbsp;</p>
        <a href="arquit_int.html">arquitectura  interior</a><br />
        <p>&nbsp;</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>&nbsp;</p>
      <a href="soluciones_urb.html">planes y proyectos urbanos</a><br />
      <p>&nbsp;</p>
      <a href="soluciones_pai.html">arquitectura del paisaje</a><br />
      <p>&nbsp;</p>
      <a href="soluciones_int.html">arquitectura  interior</a><br />
      <p>&nbsp;</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>&nbsp;</p>
      <a href="mision-vision.html">misión / visión</a><br />
      <p>&nbsp;</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>&nbsp;</p>
      <a href="clientes.html">clientes</a><br />
      <p>&nbsp;</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>


$（文档）.ready（函数（）{
$（“.slidingDivP”）.hide（）；
$（“.show_hideP”）.show（）；
$（'.show_hideP'）.mouseover（函数（）{
$（“.slidingDivP”）.slideToggle（）；
$（“.slidingDivS”）.hide（）；
$（“.slidingDivE”）.hide（）；
$（“.slidingDivQ”）.hide（）；
}); 
});
$（文档）.ready（函数（）{
$（“.slidingDivS”）.hide（）；
$（“.show_隐藏”）.show（）；
$（'.show_hideS'）.mouseover（函数（）{
$（“.slidingDivS”）.slideToggle（）；
$（“.slidingDivP”）.hide（）；
$（“.slidingDivE”）.hide（）；
$（“.slidingDivQ”）.hide（）；
});
});
$（文档）.ready（函数（）{
$（“.slidingDivE”）.hide（）；
$（“.show_hideE”）.show（）；
$（'.show_hideE'）.mouseover（函数（）{
$（“.slidingDivE”）.slideToggle（）；
$（“.slidingDivP”）.hide（）；
$（“.slidingDivS”）.hide（）；
$（“.slidingDivQ”）.hide（）；
});
});
$（文档）.ready（函数（）{
$（“.slidingDivQ”）.hide（）；
$（“.show_hideQ”）.show（）；
$（'.show_hideQ'）.mouseover（函数（）{
$（“.slidingDivQ”）.slideToggle（）；
$（“.slidingDivP”）.hide（）；
$（“.slidingDivS”）.hide（）；
});
});
$（文档）.ready（函数（）{
$（“.slidingDivB”）.hide（）；
$（“.show_hideB”）.show（）；
$（'.show_hideB'）.mouseenter（函数（）{
$（“.slidendivb”）.slideDown（）；
});
$（'.show_hideB'）.mouseleave（函数（）{
$（“.slidingDivB”）.slideUp（）；
});