Overlaying a div upon an image on mouseover with fadein fadeout effects

StackOverflow https://stackoverflow.com/questions/22438729

質問

I was creating an overlay upon an image which works when mouseover the image. I use jquery fadein effect for the overlay to appear and fadeout to dissapear. The overlay is a div cointaining a paragraph. The problem is that when i mouseover the paragraph,it is calling the fadeout event again which makes an unwanted flickering. 

<html>
<head>
  <script>
      $(document).ready(function(){
         $('.pic').mouseover(function(){
           $(this).next().fadeIn("fast");
         }); 

          $('.overlay').mouseout(function(){
           $(this).fadeOut("fast");
         });       
      });
  </script>
  <style>
    .overlay{ display:none; position:absolute; top:0; width:100%; }
  </style>
</head>
<body>
  <div class="container">
    <img src="xyz.jpg" class="pic" />
    <div class="overlay">
      <p>Hello guys</p>
    </div>
  </div>
</body>
役に立ちましたか？

解決

Use instead:

$('.container').hover(function () {
    $(this).find('.overlay').fadeToggle("fast");
});

他のヒント

This is because fadeOut has a display:none at the end of it, so when you move your mouse after the fadeOut has completed it will trigger the unhover function. Instead, just animate the opacity.

$('.main-overlay').hover(function() {
    $(this).animate({opacity: 0}, 1000);
}, function() {
    $(this).animate({opacity: 1}, 1000);
})

See demo

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top