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可以或不可以工作。但它应该给你一个想法。