jQuery disable background when sub menu opens and enable back after it's closed

Question

I created a menu, while hovering over it a container will sides down for each menu respectively. I need of help in how to disable/change color of the body to black, when the container slides down and revert it after the container slides up (when clicking anywhere in the document). The background color change need to be in animation effect.

jsFiddle link: http://jsfiddle.net/N8KWG/3/

Answer 1

see below link you need to add another div with 100% height and width

js fiddle link here http://jsfiddle.net/N8KWG/5/

 [1]: http://jsfiddle.net/N8KWG/5/

Answer 2

Add to CSS:

body.black { background-color: #000; }

and then just add and remove the class when needed if you need to have them in two separate places, otherwise you can use toggleClass. Just add the animation with animate().

$("body").addClass("black"); or $("body").removeClass("black");

Or you can add the animation to the CSS code with the following for each browser. Add to both the "normal" body css and the black one so that you get the effect both ways.

transition: background-color 300ms linear;

http://jsfiddle.net/TEguu/

Answer 3

Just try this and i suggest that u have asked this

find the below code

$('.home').hover(function(){
 $('.container-2,.container-3,.container-4,.container-5,.container-6,.container-7,.container-8').hide();
 $('.container-1').slideDown(750);
     $("body").addClass("black");
  },function(){
  $("body").removeClass("black");
 });

Look at here http://jsfiddle.net/N8KWG/7/