How to create a fade/mix effect

  Read comments...

Summary
A guide for using CSS3 opacity to create a fade/mix effect

When creating a fade-out/fade-in effect you could use a single canvas and fade the charts in and out sequentially - but you won't get the mix-in effect like you do below. This mix effect is achieved by using two canvas tags and fading one out whilst fading in the other. This way one is partly faded out whilst the other is partly faded in. You can see the effect by clicking the buttons below to switch between charts. The charts are both drawn initially, however one of the canvas tags is set to have no opacity so that you can't see it. During the switch the canvas is faded in and the other canvas is faded out.

The buttons are also disabled appropriately to provide a better user experience.

[No canvas support] [No canvas support]

<script>
    window.onload = (function ()
    {
        /**
        * Create the line chart
        */
        var line = new RGraph.Line({
            id: 'cvs1',
            data: [1,5,3,4,6],
            options: {
                labels: ['Jane','Luis','Pete','Hoolio','Rich'],
                'background.grid.autofit.numvlines': 4,
                shadow: false,
                tickmarks: 'filledcircle',
                textAccessible: false
            }
        }).fadeIn({frames: 60});




        /**
        * Create the Bar chart
        */
        var bar = new RGraph.Bar({
            id: 'cvs2',
            data: [1,5,3,4,6],
            options: {
                labels: ['Jane','Luis','Pete','Hoolio','Rich'],
                'background.grid.autofit.numvlines': 5,
                shadow: false,
                hmargin: 20,
                textAccessible: false
            }
        }).draw();




        $('#butShowBar').on('click', function (e)
        {
            line.fadeOut()
            bar.fadeIn(null, function ()
            {
                $('#butShowBar')[0].disabled  = true;
                $('#butShowLine')[0].disabled = false;
            });
        })




        $('#butShowLine').on('click', function (e)
        {
            bar.fadeOut();
            line.fadeIn(null, function ()
            {
                $('#butShowBar')[0].disabled  = false;
                $('#butShowLine')[0].disabled = true;
            })
        })
    })
</script>
Share RGraph
X

Comments