Question

In the following code, the .mouseover() portion works fine, but some funny things are happening when .mouseleave() portion is trigged. For one, the opacity of '.step_details'is not resetting. I have tried using both .animate() and .css() to reset the opacity to 0 with no success. Any thoughts on why this might be?

$('.step').mouseover(function() {
    $(this).css({'border': 'solid #CCC 1px', 'background-color': '#FFF'})
        .animate({'margin-top': '0', height: '300px'}, 500);
    $(this).children('.step_details').css('display', 'block')
        .animate({opacity: 1},700); 
})

$('.step').mouseleave(function() {
    $(this).css({'border': 'none', 'background-color': 'inherit'})
        .animate({'margin-top': '150px', height: '150px'}, 200);
    $(this).children('.step_details').css({'display': 'none', 'opacity': 0});
})

Also, there is an inconsistent delay between the resetting of the border/background and the start of the animation that resets the top margin and the height of '.step'. This seems to imply that the opacity problem may just be a symptom of me misusing the .mouseleave() event trigger. What am I doing wrong? Is there a better way I should be doing this?

Thanks for reading!

Answer 1

The opacity won’t change because the animation sets display:none which is a binary switch to not show that element, any opacity changes won’t be seen. However, fadeIn and fadeOut are a good solution for what you’re doing.

demo jsfiddle

$('.step').hover(function() { // mouse enter

  $(this).animate({
      'margin-top': '0', 
      height: '300px'
  }, 500).children('.step_details').fadeIn(700);

}, function() { // mouse leave

  $(this).animate({
    'margin-top': '150px', 
    height: '150px'
  }, 200).children('.step_details').fadeOut(200);

});

the border/background changes can be handled in the CSS using the :hover pseudo-class

.step {
  margin-top:150px;
  border:none;
  background-color:#eee;
}
.step:hover {
  border:solid #CCC 1px;
  background-color:#fff;
}