Question

所以......我有一些div元素，我想在点击另一个元素时将它们淡化为完全透明。但我不想立刻淡化它们。我希望以渐变的方式从左到右淡化它们，从完全不透明开始，以完全透明的方式结束。

我没有任何代码，因为我在网上找不到任何谈论此内容的内容。

我感谢任何人想要提供的任何帮助。

Answer 1

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

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

看看这个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都会被调用。

Answer 4

您可以：

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

首先，您必须找出rendering an HTML5 element in an HTML5 canvas的解决方案。

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

div的不透明度梯度转换

4 个答案: