当前位置：文江博客话题详情

Jquery滑动面板

发布于 2024-12-20 20:10:25 字数 246 浏览 2 评论 0原文

我只设置了一些基本面板，我试图将它们水平滑入和滑出。我试图在页面加载时隐藏除第一个面板之外的所有内容，然后当单击其他面板的链接时，当前显示的内容将向左滑动以隐藏，然后新内容将滑入页面的中心，等等。目前，我所拥有的盒子的位置不适合我。

可以在此处查看演示：

http://jsfiddle.net/fE8ks/

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

舂唻埖巳落 2024-12-27 20:10:25

您真的需要将元素定位在左侧吗？因为如果您可以简单地隐藏它们，那么实现您的效果的代码非常简单：

$(document).ready(function() {
$('#container').css({position:'relative'});
    $("#container div:not(:first)").hide();
    $('.div1').addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
            $('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
        });
        return false;
    });
});

我也将此版本放入您的小提琴中： http://jsfiddle.net/fE8ks/1/

Do you really need to position elements with margin to the left? Because if it works for you to simply hide them, the code which does your effect is pretty simple:

$(document).ready(function() {
$('#container').css({position:'relative'});
    $("#container div:not(:first)").hide();
    $('.div1').addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
            $('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
        });
        return false;
    });
});

I've also put this version to your Fiddle: http://jsfiddle.net/fE8ks/1/

回复收藏 0 原文