MarksCode MarksCode - 4 months ago 20
jQuery Question

jQuery hover with fadeIn trouble

I'm trying to make a menu fade in when a user hovers over a button. I'm running into an issue that is causing the menu to start fading in, then disappear, then finish fading in. I think this is caused by the fact that the menu doesn't automatically pop up but instead has a 300 millisecond fade in.

Here is a gif of the issue

My js looks like this:

$(allUsersButton).hover(function(){
$(allUsersDiv).hide().appendTo('#FriendMenu').fadeIn(300); // Menu fade in
});
$(allUsersDiv).attr('id', 'allUsersDiv').bind('mouseleave', function(){
$(this).fadeOut(300); // Menu fade out
});


This issue is really puzzling me. Does anybody know why this might be happening and what would be a good fix?

Edit* Here is a fiddle: https://jsfiddle.net/hsoju7q1/1/

Answer

var myDiv = document.createElement('div');
$(myDiv).attr('id', 'myDiv').bind('mouseleave', function() {
  $(this).fadeOut(300, function() {
    $('#butt').hover(myFunc);
  });
});

$('#butt').hover(myFunc);

function myFunc() {
  $(this).off();
  $(myDiv).hide().appendTo($('#wrap')).fadeIn(300);
}
#wrap {
  height: 200px;
  width: 150px;
  border: 1px solid black;
}
#myDiv {
  position: absolute;
  width: 100px;
  height: 150px;
  left: 0;
  top: 0;
  border: 1px solid red;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <button id="butt">
    +
  </button>
</div>

Yes, small adjustments. the hover was creating the issue.

link to fiddle: https://jsfiddle.net/alokrajiv/hsoju7q1/2/

var myDiv = document.createElement('div');
$(myDiv).attr('id', 'myDiv').bind('mouseleave', function() {
  $(this).fadeOut(300, function() {
    $('#butt').hover(myFunc);
  });
});

$('#butt').hover(myFunc);

function myFunc() {
  $(this).off();
  $(myDiv).hide().appendTo($('#wrap')).fadeIn(300);
}

Will update this answer soon with proper details.

Comments