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

看看这个小提琴。

这是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完成动画时都会调用。

Answer 4

您或许能够：

1. 在 div 顶部放置一个透明的 HTML5 画布
2. 在 HTML5 画布中渲染 div
3. 隐藏 div
4. 使用alpha 透明度创建透明渐变效果

首先，您必须找出在 HTML5 画布中呈现 HTML5 元素的解决方案。

如果您的 div 只是一个图像或简单的东西，您仍然可以通过自己在画布中渲染 div 的每个组件来采用这种方法