Question

我有一个带有叠加div的滑块我在悬停时显示它，但我想让它淡入淡出

  <div>
   <div class="slider-overlay overlay-center">
    <div class="inner hidden">
      <h1 class="text">
        Text
      </h1>
      <hr>
      <p>text</p>
      <a href="#" tabindex="-1">#</a>
    </div>
  </div>
  <img class="desktop-slide-img" src="image" alt="Let's Do Cocktails">
</div>


   <script>
    $(".slider-overlay").hover(function(){
      $('.inner').removeClass('hidden');
      },function(){
          $('.inner').addClass('hidden');
      });
  </script>

Answer 1

您可以使用fadeIn / fadeOut而不是addClass / removeClass：

$(".slider-overlay").hover(function() {
     $('.inner').fadeIn('slow');
  },
  function(){
    $('.inner').fadeOut('slow');
  }
);

此外，如果您有多个slider-overlay div实例，则需要使用DOM遍历来遍历正在执行悬停的内部元素。您可以将hovered元素上下文与.find()

一起使用

$('.inner', this).fadeIn('slow');

Answer 2

您可以尝试以下代码：

在这里演示：https://output.jsbin.com/jaqafag

https://jsbin.com/jaqafag/6/edit?html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
   <div class="slider-overlay overlay-center">
    <div class="inner hidden">
      <h1 class="text">
        Text
      </h1>
      <hr>
      <p>text</p>
      <a href="#" tabindex="-1">#</a>
    </div>
  </div>
  <img class="desktop-slide-img" src="image" alt="Let's Do Cocktails">
</div>
<script>
$(document).ready(function(){
    $(".slider-overlay").hover(function(){
       $('.inner').fadeIn("slow");
    }, function(){
       $('.inner').fadeOut("slow");
    });
});
</script>
</body>
</html>

淡入/滑出div滑块

2 个答案: