如何使用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/（单击丢弃的下拉菜单）

希望这有助于。 :)