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的fadeIn / Out，但我不确定如何将它应用于此？该脚本非常具体，允许内容从mainnav和subnav显示，并在单击任何一个时更改活动类。

你可以在这里看到我的意思： http://banderdash.net/design

但是它起伏不定。

除了快速淡出内容并快速淡入新内容之外，我希望窗口向下滑动到内容空间。我只是使用这样的锚：

<a name="work">

然后这样打电话：

<a href="#work">

尽可能地将窗口向下跳，但是因为黑色中的内容并不总是足以制作一个Y平面，允许顶部的白色空间移出可视范围。所以我认为幻灯片可以更好地工作。如何告诉它在点击时向下滑动href的值？

Answer 1

首先，我不会使用命名锚点。我可以在那些内容孩子的div上制作那些id。这样你就不必在复杂的表达上做任何真正的选择，只需在内容中搜索div的id。其次，这允许您单独为每个div制作动画。我认为这是让你掌控最多的东西。最后，您需要从您的点击处理程序返回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 c＆amp; p可能有效，也可能无效。但它应该给你一个想法。

jQuery幻灯片/淡入淡出功能

1 个答案: