使用CSS可見性淡入：可見？

Question

我使用visibility: hidden;和visibility: visible;來顯示和配置div，例如模態和其他div。我想點擊<a>鏈接來運行javascript以顯示和隱藏div，但我非常希望繼續使用visibility元素來切換div的可見性。有沒有辦法用HTML/CSS/JavaScript/jQuery做到這一點？

Answer 1

jQuery中：

$('selector').fadeIn(); 

使用CSS，使用不透明度：（這是50％）

-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50; 

如果你想使用手動的淡入，調整這種不透明的步驟，當你達到不可見的地步時，加上display:none但是如果你用jQuery反正，堅持用fadeIn()

fadeIn()也支持速度，只需加上毫秒作爲第一個參數。看看文檔：http://api.jquery.com/fadeIn/

想要保持display財產在CSS中，使用fadeTo()。它需要透明度百分比：http://api.jquery.com/fadeto/

$(this).fadeTo("slow", 1); // 100% visible 
$(this).fadeTo("slow", 0); // 0% visible aka hidden 

Answer 2

我喜歡劉若英的答案，但如果你堅決要使用visibility屬性（如你說你這樣做），那麼你可以使用CSS（）這樣做：

$('selector').css('visibility', 'hidden'); 
$('selector').css('visibility', 'visible'); 

Answer 3

我假設你想要使用可見性：隱藏，而不是顯示：無，所以你看到一個空的空間。

如果這樣，fadeIn（）和fadeOut（）將無法爲您工作，因爲它在淡出後將顯示設置爲無。

取而代之，使用jQuery animate（）爲不透明度設置動畫，然後添加可見性：在回調中隱藏/可見。

下面是我將如何與jQuery做到這一點。

$('#a-id').click(
    if($('#div-id').css('visibility') == 'hidden'){ 
    $('#div-id').animate({opacity: 1}, 'fast', function(){ 
    $('#div-id').css('visibility', 'visible'); 
    }); 
    }else{ 
    $('#div-id').animate({opacity: 0}, 'fast', function(){ 
    $('#div-id').css('visibility', 'hidden'); 
    } 
); 

我敢肯定有更好的方法做到這一點，但這工作沒有問題afaik。

Answer 4

您也可以用CSS3實現這一點：http://jsfiddle.net/dc7EV/

$("#hideme").click(function(){ 
    $(this).removeClass("fadein").addClass("fadeout"); 

    setTimeout(function(){ 
     $("#hideme").removeClass("fadeout").addClass("fadein"); 
    }, 2000); 
});​ 

CSS

#hideme{ 
    border:solid 1px #000; 
    background:#ccc; 
    padding:20px; 
} 


@-webkit-keyframes fadeout{ 
    0%{opacity:1;visibility:visible;} 
    99%{opacity:0;} 
    100%{opacity:0;visibility: hidden;} 
} 
.fadeout { 
    -webkit-animation:fadeout 1s linear; 
    visibility:hidden; 
} 
@-webkit-keyframes fadein{ 
    0%{opacity:0;visibility:visible;} 
    100%{opacity:1;} 
} 
.fadein { 
    -webkit-animation:fadein 1s linear; 
} 
​