CODEWITHSUNDEEP
jquery
akano1
akano1

Reputation: 41684

how to fade a background with jquery

just wondering how I can fade the background color of the whole page.

I have form that I need to fadein when a link is clicked, and I need to fade the background color at the same time.

the code below doesn't work.

 <form id="popup" method="post" action="">
              <a id="close">x</a>
              <p>WAITING LIST</p>
                <p>Temporary out of stock,Enter details to receive email alert<br />
              when back in stock</p>

                <span>First Name*</span>
              <input type="text" name="firstname" />
                <span>Last Name*</span>
              <input type="text" name="lastname" />
                <span>Email*</span>
              <input type="text" name="email" /><br />
              <input type="image" name="ok" id="ok" src="images/buttons/confirm.png" alt="confirm" />


            </form>



$(function() {

   $('a.button').click(function() {
         $('body').animate({backgroundColor: "#3b3838"}, 'slow');
         $('form#popup').fadeIn(500);
     return false;
   });

   $('a#close').click(function() {

      $('form#popup').fadeOut(500);                         
   });

  $('#ok').click(function() {
     $('form#popup').fadeOut(500);
     return false;
  });
});

any help would be appreciated.

Upvotes: 0

Views: 580

Answers (2)

Teja Kantamneni
Teja Kantamneni

Reputation: 17492

Although color is nice plugin, for this particular case, I would suggest using some what simpler and effective plugin called hightlight jQuery Highlight

Upvotes: 1

Scott M.
Scott M.

Reputation: 7347

the base jquery library has no facilities for animating color. if you want to animate the color of anything (including your background) use the color plugin.

Upvotes: 3

Related Questions