javascript - divの不透明度グラデーション遷移

Question

だから....いくつかの div 要素があり、別の要素をマウスでクリックすると、それらを完全に透明にフェードしたいと考えています。しかし、私はそれらを一度にフェードしたくありません。完全な不透明度から完全な透明度まで、グラデーションで左から右にフェードしたいと考えています。

これについて話しているウェブ上で何も見つからなかったため、コードはありません。

誰かが提供したい助けに感謝します。

Answer 1

jQueryでfadeIn関数とfadeOut関数を作成し、すべての要素が処理されるまで、同じ関数内のコールバックで自分自身を呼び出すことができます:

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');
});    

Answer 2

div を必要な (n) 個のインスタンスに複製します。複製された各 div には (a) 幅があり、隣り合って配置されます

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

これで、ループを実行して左から右にフェードできます

(この技はnivoスライダーで使われています)

エッジ js ライブラリhttp://www.netzgesta.de/edge/があります。エッジをアニメートするとどうなりますか? 試してみませんか

Answer 3

次のことができる場合があります。

1. 透明な HTML5 キャンバスを div の上に配置します
2. HTML5 キャンバスで div をレンダリングする
3. divを隠す
4. アルファ透明度を使用して、透明なグラデーション効果を作成します

まず、HTML5 canvas で HTML5 要素をレンダリングするための解決策を見つけ出す必要があります。

div が単なる画像または単純なものである場合でも、キャンバス内の div の各コンポーネントを自分でレンダリングすることで、このアプローチを取ることができる場合があります。

Answer 4

このフィドルを見てください。

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;

fadeDivdiv前のアニメーションが終了するたびに呼び出されます。