淡入/淡出格在滑塊

-2

的我有一個覆蓋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>

來源

2017-08-02 Scott Gillespie

你想[fadeToggle（HTTP： //api.jquery.com/fadetoggle/）？ –

使用.fadeToggle（）代替 – anu

同意以上兩種檢查方式：-https：//stackoverflow.com/a/45453529/4248328 –

您可以使用淡入/淡出，而不是addClass/removeClass：

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

此外，如果你有滑蓋覆蓋DIV的多個實例，你需要使用DOM遍歷穿越到正在執行懸停內部元件。您可以使用懸停的元素背景隨着.find()

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

來源

2017-08-02 06:54:47

你可以試試這個代碼：

演示在這裏：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>

來源

2017-08-02 06:56:11

淡入/淡出格在滑塊

回答

相關問題