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的不透明渐变过渡

回答

相关问题