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 щелкают оживляет своп это делает. Я хотел бы использовать fadeIn/Out jQuery, но я не совсем уверен, как я могу применить его к этому? Сценарий очень специфичен, чтобы контент показывался из mainnav и subnav и менял активный класс на обоих при нажатии.

Вы можете увидеть, что я имею в виду здесь: http://banderdash.net/design

Но он чувствует себя много порывистый.

В дополнение к быстрому исчезновению содержимого и быстрому исчезновению нового содержимого я хотел бы, чтобы окно скользило вниз до содержимого. Я только с помощью анкеров, как это:

<a name="work"> 

и затем вызвать так:

<a href="#work"> 

Какие прыжки окно вниз, насколько это возможно, но потому, что содержание в черном не всегда достаточно, чтобы сделать Y-плоскость, которая позволила бы белым пространством на вершине перемещаться из видимого звонка. Поэтому я думаю, что слайд будет работать намного лучше. Как я могу сказать, что он сдвигает значение href по клику?

Answer 1

Прежде всего, я бы не использовал названные якоря. Я мог бы сделать эти идентификаторы на divs, которые являются детьми контента. Таким образом, вам не нужно делать какие-либо реальные рекомендации по сложным выражениям, просто поиск по id для div внутри контента. Во-вторых, это позволяет анимировать каждый div отдельно. Я думаю, что это goign, чтобы дать вам максимальный контроль. Наконец, вам нужно вернуть false из вашего обработчика кликов в противном случае его goign, чтобы выполнить обычную функциональность типа «переход к». Мой сценарий может выглядеть следующим образом:

Содержание:

<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 с & р может или не может Работа. но это должно дать вам представление.