CODEWITHSUNDEEP
jqueryslidedownslideup
user1763975
user1763975

Reputation: 11

jquery slideUp / slideDown weird behavior

im having issues with my code using the mouseover and mouseout jquery events. I have tried using the hover() function, but the weird behavior is the same, basically what happens is the first time i put the mouse over the div it triggers both events, and slides down and inmediatly slides up the div that im using as a background for a menu, what i want is to keep the div that slides down frozen until the user moves the pointer out... i appreciate any help that you can provide... here is my code, and thanks in advance

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

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

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

Upvotes: 1

Views: 584

Answers (4)

user1763975
user1763975

Reputation: 11

Ok here is the link where you can see the problem http://porotoestudio.com/a/ana/nmd/espiritu.html

what i'm trying to do is to create a navigation bar, all the elements have to be animated, the porblem is with the background, slideDivB is behind show_hideB, the animation works, but the problems is that when i'm trying to move around the bar and over the elements, SlidingDivB starts to show and hide like crazy, i need for it to stay still and showing while i navigate trough the elements....

this the html codes

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

and this again is the script of the wole navigation bar

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

Upvotes: 0

barakadam
barakadam

Reputation: 2269

Are your two elements or div placed one after the other? If so, this is the normal behaviour: when your mouse enters div 2 (triggering the sliding effect), it reveals div 1, but at the same time, it makes div 2 slide down which brings it away from your pointer and triggers a "mouseout" event (which, in turn, triggers the slideUp again...).

What are you trying to create? An accordeon effect? You should either place "show_hideB" in your page in such a way that the slideUp/slideDown of "slidingDivB" does not make it move, or else, you should change your approach, and maybe bind to the click event. (clicking on show_hideB would then trigger the sliding effect and you will not have any problem with the fact that when divB moves, it actually triggers a mouseout event...)

Give us your HTML Code if you want more precise advice

Upvotes: 0

neo108
neo108

Reputation: 5264

Try toggle or slideToggle for mouseenter.

$(document).ready(function(){

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

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

});

JS Fiddle DEMO

Upvotes: 1

Maktouch
Maktouch

Reputation: 3247

Mouseout goes with mouseover, mouseenter goes with mouseleave. Try replacing mouseout with mouseleave.

Also, post a jsfiddle if you want us to be more specific.

Upvotes: 1

Related Questions