動畫上隱藏的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顯示

回答

相關問題