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