javascript - 如何使用 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 中的 drop 过渡来完成此操作：

$('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/（点击下拉菜单上的 Drop）

希望这会有所帮助。:)