Javascript div的不透明度梯度转变

所以。。。。我有一些div元素，我想在鼠标点击另一个元素时将它们淡入完全透明的状态。但我不想一下子就把它们都褪色。我想让它们从左到右渐变，从完全不透明开始，到完全透明结束

我没有任何代码，因为我在网上找不到任何关于这个的东西

非常感谢任何人提供的帮助。

将您的div克隆到（n）个您想要的实例中，每个克隆的div都有（a）宽度和位置

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

现在，您可以运行一个从左到右淡入淡出的循环

（此技术用于nivo滑块）

有一个edge js库。如果对边设置动画，会发生什么？你能试试看这个吗

以下是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;

---

每次上一个

div

完成动画制作时，都会调用

fadeDiv

。

您可以使用jQuery创建fadeIn函数和fadeOut函数，并在同一函数的回调中调用自己，直到所有元素都被处理完毕：

allDivs=$（“.container div”）.length；//获取元素的数量
$（“.button”）。单击（函数（）{
$（this.toggleClass（'fadeIn'））
if（$（this）.hasClass（'fadeIn'））{
淡出（0）；//隐藏元素的函数
}否则{
fadeIn（0）；//用于显示元素的函数
}
}     
var衰减=函数（i）{
$（“div.container div:eq（+i+））.fadeTo（'slow'，0，function（）{
如果（i你可以：

将透明HTML5画布放在div顶部
在HTML5画布中呈现div
藏起来
用于创建透明渐变效果
首先，你必须找出解决问题的办法

如果您的div只是一个图像或简单的东西，您可能仍然能够通过自己在画布中渲染div的每个组件来采用这种方法
您是否正在尝试做类似的事情，或者您是否需要可以使单个div的左侧淡入淡出，而右侧淡入淡出的东西？后者正是我想要做的。谢谢；不过，我还是想在一个分区中设置渐变。如果这不可能，那么这也是我想知道的。谢谢，真的，但请参阅对上述答案的评论。谢谢，但是没有办法在一个分区中设置不透明度渐变吗？我不这么认为：（你能尝试创建一个透明的覆盖png，然后在div的顶部添加吗？有一个edge js库。如果你对边缘设置动画会发生什么？你能尝试覆盖png是静态的吗？我想要一个过渡-观看div元素的动画（单数）从左到右变为透明-因此，虽然左侧有点透明，但右侧仍然不透明，但最终整个事物变为透明。
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');
});