使用css更改添加效果（jQuery）

Question

我有一個圖像，當我將它懸停時，圖像消失並顯示文本。但我想添加一個效果，如fadeIn()，但它不起作用。

我有這樣的代碼：

$('.gridImage').hover(function(){ 
    $(this).find("img").css("visibility","hidden"); 
}, function(){ 
    $(this).find("img").css("visibility","visible"); 
}); 

我試着用$(this).find("img").css("visibility","hidden").fadeIn(1000);但它不工作。有人能幫助我嗎 ？

編輯：

<div class="col-md-15 col-lg-15 col-sm-4 col-xs-12 gridImage"> 
     <img src="images/bonheur.jpg" class="img-responsive gridImage couple1" id=""> 
     <div class="projet text-uppercase">Voir le projet</div> 
    </div> 

Answer 1

在CSS設置visibility意味着圖像會立即變得不可見。自己使用fadeIn()和​​代替：

$('.gridImage').hover(function(){ 
    $(this).find("img").fadeOut() 
}, function(){ 
    $(this).find("img").fadeIn() 
}); 

或者只是簡單地fadeToggle()這兩個事件下：

$('.gridImage').hover(function(){ 
    $(this).find("img").fadeToggle() 
}); 

另外請注意，您可以在CSS單獨做到這一點，而不需要任何JS代碼：

.gridImage img { 
    transition: opacity 0.5s; 
} 
.gridImage:hover img { 
    opacity: 0; 
} 

Answer 2

fadeIn()已經從display: none動畫到display: inline（在這種情況下，因爲它是一個<span>），如果你想動畫visibility，使用animate()

這裏一個簡單的演示與fadeIn()和​​

$('.gridImage').hover(function() { 
 

 
    $(this).children("img").fadeOut(1000, function() { 
 
    $(this).siblings("span").fadeIn(1000); 
 
    }); 
 
});

span.text { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gridImage"> 
 
    <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" /> 
 
    <span class="text">THIS IS GRUMPY CAT!</span> 
 
</div>