Fading between two classes in jquery_问答_开发者

开发者 https://www.devze.com 2022-12-18 12:15 出处：网络

I would like to be able to fadeout this class <h2 class=\"care-home-fees\"><a title=\"Care Home Fees\" href=\"#\">Tex开发者_JAVA技巧t</a></h2>

相关专题：css jquery

I would like to be able to fadeout this class

<h2 class="care-home-fees"><a title="Care Home Fees" href="#">Tex开发者_JAVA技巧t</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>

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/

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!

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..

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