Question

我使用mouseover和mouseout jquery事件解决了我的代码问题。我已经尝试过使用hover（）函数，但奇怪的行为是一样的，基本上发生的事情是我第一次将鼠标放在div上它触发两个事件，并向下滑动并立即向上滑动我使用as的div一个菜单的背景，我想要的是保持滑下来的div直到用户将指针移出...我感谢您提供的任何帮助...这是我的代码，并提前感谢

$(document).ready(function(){
    $(".slidingDivB").hide();
    $(".show_hideB").show();        

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

    $('.show_hideB').mouseout(function(){
        $(".slidingDivB").slideUp();
    });
});

Answer 1

Mouseout与mouseover相符，mouseenter与mouseleave相符。尝试用mouseleave替换mouseout。

另外，如果您希望我们更具体，请发布一个jsfiddle。

Answer 2

对于mouseenter，请尝试toggle或slideToggle。

$(document).ready(function(){

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

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

});

JS Fiddle DEMO

Answer 3

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

你想创造什么？手风琴效应？您应该在页面中放置“show_hideB”，使得“slidingDivB”的slideUp / slideDown不会移动，否则，您应该更改您的方法，并且可能绑定到click事件。（点击show_hideB然后会触发滑动效果，当divB移动时，它实际上会触发mouseout事件，你不会有任何问题......）

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

Answer 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>&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>

jquery slideUp / slideDown奇怪的行为

4 个答案: