javascript - 我如何使用 jQuery 向我的网站添加 slider 过渡？

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/ (点击下拉菜单中的下拉)

希望这对您有所帮助。 :)