How can add fade In() effect to each appearance of a div when the mouse click?

By : OOOO
Source: Stackoverflow.com
Question!

How can add fadeIn() effect to each appearance of a div when the mouse click?

So when onmouseclick, yellow part is showing with fadeIn() effect.

Fiddle : http://jsfiddle.net/2ehdW/7/

Script :

window.jQueryclick: function (event) {
    if (!event.point.selected) {
        $('#testDiv').show();
        var chart_data = '<div> Name: ' + event.point.name + ' Share: ' + event.point.y + '</div>';
        $('#testDiv').html(chart_data);
    } else {
        $('#testDiv').hide();
    }
}
By : OOOO


Answers

Add a parameter to .show() method and hide the div before showing it again:

if (!event.point.selected) {
   $('#testDiv').hide();
   $('#testDiv').show("300"); //or just $('#testDiv').fadeIn();
   var chart_data = 'Name: '   event.point.name   ' Share: '   event.point.y;
   $('#testDiv').html(chart_data);
} else {
   $('#testDiv').hide();
}

FIDDLE



This video can help you solving your question :)
By: admin