Jquery UI：結合盲目和淡入淡出效果

我甚至不確定這是否可能，但我想結合盲目和淡入淡出。Jquery UI：結合盲目和淡入淡出效果

Fade通過改變元素的不透明度來工作，而盲目的我認爲，通過改變寬度/高度。

我的目標是創建一個動畫，其中元素的邊緣會在屏幕上消失，也就是盲人和褪色的組合。我不知道是否有一個術語。

但無論如何，這是可能做到的，如果是的話如何？

來源

2009-06-14 Jourkey

我現在想到的解決方案是將衰落的元素分解爲1px的塊，然後在發生盲目的同時單獨淡化每個像素。我無法想象這與當前的瀏覽器平滑。

我只是暫時稱之爲'不可能'。

來源

2009-08-25 11:30:12 Jourkey

玩弄jQuery animate()功能。這基本上允許您在一段時間內在CSS值（從任何對象開始到您定義的值）之間進行線性插值。所以你可以用它來改變你自己的不透明度和寬度，以達到你想要的效果。

但是要小心，因爲您需要考慮所有不透明度的變體，因爲IE尚不支持標準的「opacity：value」。一。

來源

2009-06-14 22:06:54

謝謝，我明白了生命的方法的有效性。但是，我沒有看到同步不透明度和寬度變化的方法，以便不透明度只在寬度發生變化的地方變化。 – Jourkey 2009-06-14 22:12:14

最簡單的方法是使用jQuery UI和toggleClass或addClass函數。這些函數的功能是從一個類到另一個類生成動畫，所以基本上你只需定義一個開始狀態和一個結束狀態，而其餘的功能則由它來完成。

希望這可以幫到你！

點擊here的小提琴

CSS

.divHidden{ 
    height: 150px; 
    opacity: 0.0; 
    width: 0px; /*Set to 0 so div is not visible */ 
    overflow: hidden; 
    background: yellow; 
} 

.divShown{ 
    opacity: 1.0; 
    width: 100px; 
}

HTML

<button>Click me</button> 
<div id="test" class="divHidden">Testing</div>

的Javascript

$('button').click(function(){ 
    $('#test').addClass('divShown', 2000); 
});

來源

2013-03-09 15:03:34

$("#box").animate({height:'0',opacity:'0'}, { complete: function() {this.remove()} });

只是用動畫？

來源

2013-08-28 12:43:01 Trent

我知道這是問前一段時間，但這些天這可能與jQuery/jQueryUI的完成，像這樣：

$('#test').hide("blind", { direction: "horizontal" }, 1500) 
    .fadeOut(1500) 
    .dequeue();

你可以通過調用.dequeue()反覆以及使用在同一時間多種功能：

$('#test').hide("blind", { direction: "horizontal" }, 1500) 
    .hide("slide", { direction: "left" }, 1500) 
    .fadeOut(1500) 
    .dequeue() 
    .dequeue();

以上將在隱藏「測試」時同時使用幻燈片和盲目效果。這裏有一個演示的jsfiddle：

http://jsfiddle.net/DirectCtrl/rVp35/1/

來源

2014-05-16 17:54:29

Jquery UI：結合盲目和淡入淡出效果

回答

相關問題