CODEWITHSUNDEEP
javascriptjquery
CaffeineToCode
CaffeineToCode

Reputation: 830

.toggle() not setting display to none?

Whilst creating a jQuery dropdown menu i ran in to a most peculiar problem - an element that has been hidden is still affecting the page. Why is this happening, and how can I fix it? It is affecting the functionality by blocking part of the button, forcing one to call the function from a unblocked part. For example;

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#start").mouseenter(function(){
    $("#box").stop().toggle();
    $("#box").stop().animate({
      top:'50px',
      opacity:'1'
    },400,function(){
    });
  });
  $("#start").mouseleave(function(){
    $("#box").stop().animate({
      top:'25px',
      opacity:'0'
    },400,function(){
    $("#box").stop().toggle();
    });
  });
});
</script> 
</head>

<body>
<button id="start">Start Animation</button>
<div id ="box" style="background:#98bf21;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;">
</div>

</body>
</html>

EDIT: set the top setting to ten px to completely cover up the button if you can't see the problem.

Upvotes: 0

Views: 72

Answers (1)

matthias_h
matthias_h

Reputation: 11416

I've just made a Fiddle where the problem is solved using z-index:-1; for the div. When this z-index is removed, the mouseenter of the button is not working for the lower part of the button because the animated div, though not visible, covers part of the button.

Upvotes: 1

Related Questions