CODEWITHSUNDEEP
jquerycss
Andy
Andy

Reputation: 3021

Fading between two classes in jquery

I would like to be able to fadeout 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>

Notice there are two separate images

Here is my current markup which doesnt 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 the button printed before any change

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

Upvotes: 2

Views: 4907

Answers (4)

Andy
Andy

Reputation: 3021

$(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);
         });
});

Upvotes: 0

jjj
jjj

Reputation: 605

first you need to download jquery i have jquery-1.3.2.min.js, but if you want the final release 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 have to add the jquery file in your html..as 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>

i hope it works..

Upvotes: 0

Will Vousden
Will Vousden

Reputation: 33348

You'll need to use jQuery UI for this. I would refer you to the documentation (here), but it seems to be broken at the moment. You'll want to use the addClass and removeClass methods mentioned there (not the default jQuery ones).

Edit: see Daniel's link!

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190907

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

What you want to do with CSS classes is in JQuery UI.

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

Upvotes: 2

Related Questions