div的不透明漸變過渡

-3

所以....我有一些div元素，我想將它們淡入淡出，只需點擊另一個元素，就可以完全透明。但我不想一下子淡化它們。我想從左到右漸變，從完全不透明到完全透明。div的不透明漸變過渡

我沒有任何代碼，因爲我在網上找不到任何關於此的任何內容。

我很感謝任何人想提供的幫助。

2012-08-09 Oijl

你們是不是要像做[diagonalFade（HTTP採取這種方式： //jonobr1.github.com/diagonalFade/）還是你需要的東西可以淡化一個單獨的div的左側，而右側不太褪色？ – CgodLEY 2012-08-09 01:50:56

後者正是我想要做的。 – Oijl 2012-08-09 05:26:35

克隆你的div到（N）你想實例的數量，每個克隆的DIV都（一）寬度和地點彼此相鄰

Original 
               Clones 
-----------------    -------------------- 
|    |    | | | | | | 
|    |  =>  | | | | | | 
|    |    | | | | | | 
|    |    | | | | | | 
-----------------    --------------------

現在你可以運行一個循環褪色從左到右

（該技術是在NIVO滑塊使用）

有一個邊緣JS庫http://www.netzgesta.de/edge/。如果你對邊緣進行動畫會發生什麼？你可以試試

來源

2012-08-09 01:58:34

謝謝，但沒有辦法讓一個div中的不透明度漸變？ – Oijl 2012-08-09 02:55:43

我不這麼認爲:(你可以嘗試創建一個透明的覆蓋PNG，然後添加在div的頂部？ – 2012-08-09 03:07:50

有一個邊緣js庫http://www.netzgesta.de/edge/。你的邊緣動畫？你能嘗試 – 2012-08-09 03:12:25

看看這個fiddle。

這裏的JS：

var fadeDivs = $('.fadeDiv'), 
    fadeDiv = (function() { 
     var maxDivs = fadeDivs.length, 
      i = -1; 
     return function() { 
      i += 1; 
      if (i === maxDivs) return; 
      $(fadeDivs[i]).animate({opacity: '0'}, 500, fadeDiv); 
     }; 
    })();; 

fadeDivs[0].onclick = fadeDiv;

fadeDiv得到每次以前div完成動畫調用。

來源

2012-08-09 02:00:40

真的，謝謝，但看到上面的答案評論。 – Oijl 2012-08-09 02:53:39

您可以創建淡入功能和淡出功能與jQuery，直到所有元素都已經被處理調用本身的調用同一個函數內回：

http://jsfiddle.net/UukNh/1/

allDivs = $(".container div").length; // get number of elements 

$(".button").click(function() { 
    $(this).toggleClass('fadeIn') 
    if ($(this).hasClass('fadeIn')){ 
     fadeOut(0); // function to hide elements 
    }else{ 
     fadeIn(0); // function to show elements 
    } 
}  



var fadeOut = function(i) { 
    $("div.container div:eq("+i+")").fadeTo('slow', 0, function() { 
     if(i <= allDivs){ 
      fadeOut(i+1); 
     } 
    }) 
} 

var fadeIn = function(i) { 
    $("div.container div:eq("+i+")").fadeTo('slow', 1, function() { 
     if(i <= allDivs){ 
      fadeIn(i+1); 
     } 
    }) 
} 


// This just changes the text of the button. 

$('.button').toggle(function() { 
    $(this).text('Fade in'); 
}, function() { 
    $(this).text('Fade Out'); 
});

來源

2012-08-09 02:24:25 Sammy

謝謝;不過，我仍然希望在單個div中使其成爲漸變。如果這是不可能的，那麼這也是我想知道的。 – Oijl 2012-08-09 02:53:09

在谷歌中查找「css漸變」 – Sammy 2012-08-09 15:14:20

您也許能夠：

放置一個透明HTML5畫布在DIV
渲染d的頂四，在HTML5畫布
隱藏在div
使用alpha transparency創建透明漸變效果

首先你必須解決找出該rendering an HTML5 element in an HTML5 canvas。

如果你的DIV只是一個圖像或簡單的東西，你仍可以通過繪製DIV的每個部件在畫布自己

來源

2012-08-10 00:54:32 CgodLEY

div的不透明漸變過渡

回答

相關問題