2010-02-01 62 views
2

我希望能夠淡出這個類jQuery的兩個類之間的衰落

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

,並在此

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

通知褪色有兩個獨立的圖像

這裏是我的目前似乎不起作用的標記

$(document).ready(function(){ 

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

}); 

任何改變之前打印按鈕

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

「請注意有兩個單獨的圖像」。什麼圖像? – 2010-02-01 12:00:15

+0

你沒有使用任何褪色..! – jjj 2010-02-01 12:01:08

回答

2

你可能想.animate(),而不是.addClass().removeClass()

你想用CSS類做什麼是在JQuery UI中。

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

+0

感謝您的幫助,我如何在課堂之間進行動畫製作? – Andy 2010-02-01 12:09:19

+1

看到這裏。 http://74.125.95.132/search?q=cache:SRanyKoRtxsJ:jqueryui.com/docs/Effects/Methods+jquery+ui+animate+between+classes&cd=1&hl=zh-CN&ct=clnk&gl=us&client=firefox-a 實際的網站已關閉:( – 2010-02-01 12:16:13

0

你需要使用jQuery UI這一點。我會向你推薦文檔(here),但目前它似乎已被打破。您需要使用那裏提到的addClassremoveClass方法(不是默認的jQuery方法)。

編輯:查看Daniel的鏈接!

+0

感謝您的輸入 – Andy 2010-02-01 12:23:55

0

首先你需要下載jQuery的 我有jquery-1.3.2.min.js,但如果你想在最終發佈jQuery 1.4.1

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

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

必須添加jQuery的文件在你的HTML ..正如我添加它下面::

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

我希望它的工作..

+0

謝謝jjj虐待現在看它是怎麼回事 – Andy 2010-02-01 13:00:15

+0

沒有它沒有工作,它淡出了頁面上的另一個鏈接,然後直接返回 – Andy 2010-02-01 13:02:28

+0

讓「護理家庭費用「可見=假 – jjj 2010-02-01 13:23:16

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