动画上隐藏的div显示

-2

当我躲在一个div类.text与动画上隐藏的div显示

div.text { 
    visibility:hidden; 
}

这个div被另一个分度类包围.col3

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

我想的可视性改变到“visible”时我悬停在.col3

我试过

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

所以这个工作，并使div可见，当我盘旋周围的股利。

如何动画（或至少减慢，淡入）div？

来源

2013-10-28 Jef Rechards

你需要CSS3或JavaScript，它是确定使用它们？ –

css3首选，但是，都接受 –

让我清除一件事，我需要使用display：hidden;显示：块; –

使用jQuery，你可以采取下面的代码片段：

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

来源

2013-10-28 13:51:43 lionheart98

你可以用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

来源

2013-10-28 13:56:17

动画上隐藏的div显示

回答

相关问题