jquery fading effect

Question

i have this javascript code to which i want to add the jquery fade-in effect

hover.addEventListener('mouseover',function () {Core.addClass(cpanel,"on");},false);

Core is another library i am using. the above event listener just enables the cpanel div to visible state. how do i make it fade into the view. i am using jquery-ui and am very new at it.

thanks a lot in advance.

Answer 1

Assuming your cpanel div has a class of 'on', you could do this:

$('.on').fadeIn("slow"); //.fadeIn("normal"); or .fadeIn("fast");

See jQuery's fadeIn effect

Answer 2

You can use fadeIn:

http://docs.jquery.com/Effects/fadeIn#speedcallback

If you still want to use your snippet to add that class (which can also be done in jQuery btw), just put the jQuery fadein code before it. This will cause the fadeIn effect to happen, and then just add the (probably redundant) "on" class.

In response to comment: This is the code I would try first

hover.addEventListener('mouseover',function () {
  cpanel.fadeIn("slow"); // this is if cpanel is a jQuery object.  If it is an element, do $(cpanel).fadeIn("slow");
  Core.addClass(cpanel,"on");
}, false);

If that still doesn't work, can you let me know what is happening, if anything? Thanks.