如何使用jQuery將滑塊轉換添加到我的網站？

Question

我正在使用jQuery庫，以便可用。我需要知道如何滑動效果添加到這個頁面：

http://qasim.x10.mx/iqbal/

請注意，當你點擊它，它淡入和淡出，但我寧願喜歡它滑動，我有一個小想法關於它們如何工作，但是按照它現在編碼的方式，但不確定實施其中的適當技術。最簡單的方法是什麼？

非常感謝。

Answer 1

據我瞭解你的網站，你有這樣的代碼，不會褪色過渡：

$('nav ul li').not('#line').click(function(){ 
    selected = $(this).attr('id'); 
    $('nav ul li').css({'background': '', 'color': '#999'}); 
    $(this).css({'background': getColor(selected), 'color': '#FFF'}); 

    $('.content').fadeOut('fast', function(){ 
     $(this).html($('div#'+selected).html()); 
     $(this).fadeIn('fast'); 
    }) 

}) 

如果你想讓它滑動，它很可能是更容易使用jQuery UI的。如果你想要像滑動和淡出了左邊，那麼你可以使用jQuery UI的下降過渡來實現：

$('nav ul li').not('#line').click(function(){ 
    selected = $(this).attr('id'); 
    $('nav ul li').css({'background': '', 'color': '#999'}); 
    $(this).css({'background': getColor(selected), 'color': '#FFF'}); 

    $('.content').hide('drop', {direction: 'left'}, 'fast', function(){ 
     $(this).html($('div#'+selected).html()); 
     $(this).show('drop', {direction: 'right'}, 'fast'); 
    }) 

}) 

我明明沒有嘗試運行在您的網站這個確切的代碼，但它肯定會看起來像這樣。

你可以找到更多關於這裏的放置效果：

• http://docs.jquery.com/UI/Effects/Drop
• http://jqueryui.com/demos/hide/（單擊丟棄的下拉菜單）

希望這有助於。 :)