Opacity gradient transition of div

Question

So.... I have some div elements, and I want to fade them, on a mouse click of another element, into complete transparency. But I don't want to fade them all at once. I want to fade them left to right, in a gradient, starting at full opacity and ending in full transparency.

I don't have any code because I couldn't find anything on the web that talked about this.

I appreciate any help anyone would want to provide.

Are you trying to do something like [diagonalFade](http://jonobr1.github.com/diagonalFade/) or do you need something that can fade the left side of a single div while the right side is less faded? — CgodLEY, Aug 09 '12 at 01:50

score 1 · Answer 1 · answered Aug 09 '12 at 02:24

You can create fadeIn function and fadeOut function with jQuery and call itself in the call back within the same function until all the elements have been processed:

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

Thank you; however, I would still want to make it a gradient in a single div. If this is not possible, then that would be something I would like to know, as well. — Oijl, Aug 09 '12 at 02:53

James · Answer 2 · 2012-08-09T03:12:20.620

0

Clone your div into (n) number of instance you want, each cloned div have (a) width and place next to each other

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

Now you can run a loop to fade from left to right

(This technique is use in nivo slider)

There is an edge js library http://www.netzgesta.de/edge/. What happen if you animate the edge? Can you try

edited Aug 09 '12 at 03:12

answered Aug 09 '12 at 01:58

James

13,571
6
61
83

Thank you, but is there no way to make gradient of opacity in a single div? – Oijl Aug 09 '12 at 02:55
I don't think so :( Can you try to create an transparent overlay png and then add on top of the div? – James Aug 09 '12 at 03:07
There is an edge js library http://www.netzgesta.de/edge/. What happen if you animate the edge? Can you try – James Aug 09 '12 at 03:12
Overlaying a png would be static, though, and I want a transition - animation of watching the div element (singular) become transparent from the left to right - so while the left side is a little transparent, the right is still opaque, but eventually the whole thing becomes transparent. – Oijl Aug 09 '12 at 05:30

Brian Ustas · Answer 3 · 2012-08-09T02:44:17.570

0

Have a look at this fiddle.

Here's the 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 gets called each time the previous div finishes animating.

edited Aug 09 '12 at 02:44

answered Aug 09 '12 at 02:00

Brian Ustas

62,713
3
28
21

Thank you, really, but see comment on above answer. – Oijl Aug 09 '12 at 02:53

score 0 · Answer 4 · edited May 23 '17 at 11:56

You might be able to:

Place a transparent HTML5 canvas over top of the div
Render the div in the HTML5 canvas
Hide the div
Use alpha transparency to create the transparent gradient effect

First you'd have to figure out the solution to rendering an HTML5 element in an HTML5 canvas.

If your div is just an image or something simple you still might be able to take this approach by rendering each component of the div in the canvas yourself

Opacity gradient transition of div

4 Answers4