Text...">
Geek Answers Handbook

Attenuation between two classes in jquery

I want to be able to fade this class

<h2 class="care-home-fees"><a title="Care Home Fees" href="#">Text</a></h2>

and fade in this

 <h2 class="care-home-fees-over"><a title="Care Home Fees" href="#">Text</a></h2>

Please note that there are two separate images.

Here is my current markup which doesn't seem to work

 $(document).ready(function(){ $("h2.care-home-fees").hover( function () { $(this).addClass("care-home-fees-over"); }, function () { $(this).removeClass("care-home-fees"); } ); });

and a button printed before any change

 <h2 class="care-home-fees"><a title="Care Home Fees" href="#">Text</a></h2>
+2
source share
4 answers

You might want .animate() instead of .addClass() or .removeClass() .

What do you want to do with CSS classes in the jQuery user interface?

http://api.jquery.com/animate/

+2
source

For this you need to use the jQuery user interface. I would like to direct you to the documentation ( here ), but it seems to be broken now. You will want to use the addClass and removeClass methods mentioned here (and not the default jQuery).

Edit: see Daniel link!

0
source

first you need to download jquery i jquery-1.3.2.min.js , but if you want the final release of jQuery 1.4.1

change <h2 class="care-home-fees"><a title="Care Home Fees" href="#">Text</a></h2> to

 <h2 class="care-home-fees"><a id="j" title="Care Home Fees" href="#">Text</a></h2>

you need to add jquery file to your html..a i added it below ::

 //this is the start of the head <head runat="server"> <title></title> // i added jquery-1.3.2.min.js file here <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script> $("h2").click(function () { $(document.getElementById('j')).fadeOut("slow"); $("a:hidden:first").fadeIn("slow"); }); </script> //this is the end of the head </head>

Hope this works.

0
source 
 $(document).ready(function(){ $('#wm').hover(function(){ $('#wm .bld').stop().fadeTo(300, 0); }, function(){ $('#wm .bld').stop().fadeTo(300, 1); }); $('#ch').hover(function(){ $('#ch .bld').stop().fadeTo(300, 0); }, function(){ $('#ch .bld').stop().fadeTo(300, 1); }); });
0
source

More articles:


All Articles