CODEWITHSUNDEEP
javascriptjquery
EducateYourself
EducateYourself

Reputation: 979

Jquery slideup slidedown unexpected behavior

I found a lot of similar questions but could not find the answer which could solve my problem.

I have a div with id 'first'. All I want is slidedown another div with id 'second' over the first one when mouse is on div 'one' and slideup div 'second' when the mouse is out of that div.

The code below works well but it has some problems.

1) when the mose is in - it slides twice.

2) when the second div is down and I move mouse over the div, it slides again

Could you please help me to get the result I want.

html 

<div>
<div id="zero"><div>
<div id="my_hover">
    <div id="second"></div>
     <div id="first"></div>
</div>
<div id="third"></div>  
</div>

js

$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });

Upvotes: 1

Views: 136

Answers (4)

Artur Filipiak
Artur Filipiak

Reputation: 9157

The easiest way is to add pointer-events: none; to the #second div CSS and position it above the #first div.

pointer-events: none; In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
(...)
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

Reference

$(document).ready(function(){
    var slide = $("#second");
    $("#first").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });
});
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>

Another way is to insert these two elements inside another element and use hover for that element instead of div #first. This way, the whole area is sensitive:

$(document).ready(function(){
    var slide = $("#second");
    $(".my-hover").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });

    //for demo:
    $('.btn').click(function(){
        alert('it works!');
    });
 
});
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
    <div id="second"><button class=btn>BUTTON</button></div>
    <div id="first">First</div> 
</div>

Upvotes: 1

frogatto
frogatto

Reputation: 29285

You can put the second div as a child of first div and by using relative/absolute positioning you can achieve what you want. 

$(document).ready(function() {
  var slide = $("#second");
  $("#first").hover(function() {
    slide.stop().slideDown("slow");
  }, function() {
    slide.slideUp("slow");
  });
});
#first {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#second {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100px;
  height: 100px;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first">First
  <div id="second">Second
    <button>click me</button>
  </div>
</div>

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26360

Okay here you go :

var $second=$("#second");

$("#first").hover(function(){
   $second.stop().slideDown("slow");
},function(){
   $second.stop().slideUp("slow");
  });
div{
    width: 100px;
    height: 100px;
    background: green;
    margin-right: 10px;
    float: left ;
    position: absolute;
    top:0;
    left:0;
}
#second{
  display: none;
  background: yellow;
  pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first">1</div>
<div id="second">2</div>

Upvotes: 1

user4571629
user4571629

Reputation: 450

I have tried your code and it's working well:

$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });

See Example: http://jsfiddle.net/dwxxpabq/

Upvotes: 1

Related Questions