显示时隐藏div上的动画[重复]答案

【问题标题】：animation on hidden div when showing [duplicate]显示时隐藏div上的动画[重复]
【发布时间】：2013-10-28 12:12:34
【问题描述】：

我用.text 隐藏了一个div

 div.text {
    visibility:hidden;
 }

这个 div 被另一个类 .col3 的 div 包围

<div class="col3">
   <div class="image-box">
      <div class="text"> test </div>
   </div>
</div>

当我将鼠标悬停在.col3 上时，我希望可见性更改为“visible”

我试过了

.col3:hover > div.text {
   visibility:visible;
}

所以这行得通，并且当我将鼠标悬停在周围的 div 时使 div 可见。

如何为 div 设置动画（或至少减慢、淡入）？

【问题讨论】：

你需要css3或者javascript，可以用吗？
css3 首选，但是是的，两者都被接受
让我澄清一件事，我需要使用 display:hidden;显示：块；
因为我希望它下面的 div 根据悬停状态向下或向上移动

标签： html css hover

【解决方案1】：

使用jQuery可以取如下代码sn-p：

$(document).ready(function()
{
    $(".col3").hover(function()
    {
        // fading in (500 = animation time in ms)
        $("div.text").css({opacity: 0.0, visibility: "visible"}, 500).animate({opacity:         1.0});
    }, function()
    {
        // hover out function -> fading out
        $("div.text").animate({opacity: 0.0}, 500, function()
        {
            // callback function -> setting visibility back to hidden
            $(this).css({visibility: "hidden"})
        });
    });
});

Demo

【讨论】：

【解决方案2】：

您可以使用jquery 轻松完成这项工作：

HTML：

<div class="col3">
   <div class="image-box">
      <div class="text"> test </div>
   </div>
</div>

CSS：

.text {
    display:none;
 }

jquery：

 $('.col3').hover(function(){
        $('.text').fadeOut(1000);
        $('.text').fadeIn( 1000 );
    }, function() {
     $('.text').css('display', 'none');
  }
);

Try This

【讨论】：