動畫不透明度隱藏/顯示

A）（工作對我來說）

... .animate({opacity: "show", marginTop: "25"}); ...

...

乙（doesn't爲我工作）

... .animate({opacity: "1", marginTop: "25"}); ...

例如http://jsbin.com/iquwuc/6/edit#preview

來源

2012-02-06 ogni

當你調用hide()這大致相當於.css('display', 'none')，所以後來改變透明度回1變爲隱藏元素的透明度。這就是爲什麼show()的原因 - 因爲它再次使元素塊。

來源

2012-02-06 10:42:02

+1用於解釋在這種情況下「show」和「1」的區別。 [ref]（http://api.jquery.com/animate/）：*除了數值之外，每個屬性都可以使用字符串'show'，'hide'和'toggle'。這些快捷方式允許自定義隱藏和顯示考慮到元素的顯示類型的動畫。* – Yoshi 2012-02-06 10:57:28

對我非常有用，非常感謝 – ogni 2012-02-06 11:07:47

我會使用dojo bibliothek（http://dojotoolkit.org/reference-guide/dojo/animateProperty.html）。你會發現DOJO不僅僅是動畫功能，這個框架提供了很多組件來解決大面積的不同問題。

來源

2012-02-06 10:44:05 Igor

在css文件或內聯。設置ID或類

在線 - <div id="myid" style="opacity:0;"></div>在CSS

 #myid { opacity: 0; } 
     .myclass {opacity: 0; }

調用生命的不透明度從jQuery的它會正常工作的其他明智的只是打電話的動畫已經在1時方式不透明度

來源

2012-02-06 10:46:27

我明白，謝謝 – ogni 2012-02-06 11:07:08

這是因爲你顯示和隱藏，而不是動畫不透明度。（有點顯而易見：P）。

編輯的代碼：http://jsbin.com/iquwuc/11/edit#preview

可以作如下修改使用不透明度設置：

添加以下的CSS：

.sub-menu li#access ul {opacity:0; display:none;}

並改變你的腳本這個：

$(document).ready(function(){ 

    $('.sub-menu').hover(function(){ 
      $('.sub-menu li#access ul').show(); 
     $('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500); 
     }, 
     function() { 
        $('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){ 
        $('.sub-menu li#access ul').hide(); 
        }); 
     }); 
});

基本上所發生的事情是：

懸停，你SHOW'ing下拉不透明度爲0，則動畫時設置margin和不透明度。並在懸停時，將不透明度設置爲0，然後再次隱藏。

來源

2012-02-06 10:49:57

好的，謝謝！ – ogni 2012-02-06 11:06:35

動畫不透明度隱藏/顯示

回答

相關問題