jQuery的幻燈片/淡入淡出功能

Question

我試圖修改此片段：

$(document).ready(function(){ 
$('.showscript').show(); 
    $("div.content:not(.about)").hide(); 

    $(".subnav a, .mainnav a").click(function(){ 
     //remove possible hilights 
     $(".subnav a, .mainnav a").removeClass("active"); 

     var href = $(this).attr("href"); 

     //hilight the clicked link 
     $('a[href="'+href+'"]').addClass("active"); 

     //hide possible shown content 
     $(".content").hide(); 

     //show my content 
     $("div.content:has(a[name='" + href.replace("#","") + "'])").show(); 
    }); 
}); 

這樣被點擊的.subnav或.mainnav一個鏈接時，它以動畫它做掉。我想使用jQuery的淡入/淡出，但我不確定如何將它應用於此？該腳本非常具體，允許內容從mainnav和subnav中顯示，並在兩者都被點擊時更改活動類。

你可以明白我的意思是： http://banderdash.net/design

但它更覺得到波濤洶涌。

除了快速淡出內容並快速淡入新內容之外，我希望窗口能夠滑向內容空間。我只是用錨這樣的：

<a name="work"> 

，然後調用這樣的：

<a href="#work"> 

其中下來就因爲它可以跳到窗口，但因爲黑內容不總是足以製造一架Y型飛機，使頂部的白色空間移出可視範圍。所以我認爲幻燈片會更好。如何告訴它在點擊時滑下href的值？

Answer 1

首先，我不會使用命名錨。我可以製作這些內容爲子項的div。這樣你就不必在複雜的表達式上做任何真正的選擇，只需要在內容中搜索id。其次，這允許您單獨爲每個div製作動畫。 ehich我認爲是goign給你最大的控制。最後，你需要從你的點擊處理程序返回false，否則它會執行正常的「跳轉」類型功能。我的代碼可能看起來是這樣的：

內容：

<div class="content"> 
    <div id="about"> ... </div> 
    <div id="work"> ... </div> 
    <div id="education"> ... </div> 
    </div> 

您onready的有關部分：

$(document).ready(function(){ 
    $(.subnav a, .mainnav a).click(function(){ 
     $(".subnav a, .mainnav a").removeClass("active"); 
     var selector = $(this).attr('href'); 

     $('a[href="'+selector+'"]').addClass("active"); 

     if($(selector, '.content').length > 0){ 
     $('> :visible', '.content').slideUp('fast', function(){ 
      $(this).fadeOut('fast', function(){ 
       $(selector, '.content').fadeIn('fast', function(){ 
        $(this).slideDown('fast'); 
       }); 
      }); 
     }); 
     } 
     return false; 
    }); 
}); 

請注意，這只是僞代碼，這樣一個simpelç& P可以或不可以工作。但它應該給你一個想法。