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）

希望这会有所帮助。：）

如何使用jQuery向我的网站添加滑块过渡？

1 个答案: