Javascript 淡入/淡出俯仰滑块_Javascript_Jquery_Html_Css

Javascript 淡入/淡出俯仰滑块

javascript jquery html css

Javascript 淡入/淡出俯仰滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个带叠加div的滑块，我把它显示在hover上，但我想让它淡入淡出 <div> <div class="slider-overlay overlay-center"> <div class="inner hidden"> <h1 class="text"> Text </h1> <hr> <p>text</p>

我有一个带叠加div的滑块，我把它显示在hover上，但我想让它淡入淡出

  <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>


正文

正文
$（“.slider overlay”）.hover（函数（）{
$（'.inner'）.removeClass（'hidden'）；
}，函数（）{
$（'.inner'）.addClass（'hidden'）；
});

您可以使用fadeIn/fadeOut代替addClass/removeClass：

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

另外，如果您有slideroverlaydiv的多个实例，则需要使用DOM遍历来遍历正在执行悬停的内部元素。您可以将悬停元素上下文与

.find（）一起使用
您可以尝试以下代码：
此处演示：


JS-Bin
正文

正文
$（文档）.ready（函数（）{
$（“.slider overlay”）.hover（函数（）{
$（'.inner'）.fadeIn（“慢”）；
}，函数（）{
$（'.inner'）。淡出（“慢”）；
});
});
您想使用.fadeToggle（）代替吗同意以上两种方法，请点击此处：-
$('.inner', this).fadeIn('slow');

<!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>