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

发布于 2024-12-06 08:01:22 字数 246 浏览 0 评论 0原文

我正在使用 jQuery 库，因此它是可用的。我需要知道如何为此页面添加滑动效果：

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

请注意，当您单击它时，它会淡入和淡出，但我更喜欢它滑动，我对它们的工作原理有一个小想法，但是以当前编码的方式，但不确定正确的方式实施一项的技术。最简单的方法是什么？

非常感谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小瓶盖 2024-12-13 08:01:22

据我了解您的网站，您有这段代码可以实现淡入淡出过渡：

$('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/效果/放置
http://jqueryui.com/demos/hide/（单击“放置”在下拉菜单中菜单）

希望这有帮助。 :)

As I understand your site, you have this code that does the fading transition:

$('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');
    })

})

If you wanted it to slide, it'd probably be easier to use jQuery UI. If you want something like to slide and fade off to the left, then you could use the drop transition in jQuery UI to accomplish this:

$('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');
    })

})

I obviously didn't try running this exact code on your site, but it will definitely look something like that.

You can find out more about the drop effect here: