CSS和jQuery animate()函数在错误的一侧创建空间

CSS和jQuery animate()函数在错误的一侧创建空间,jquery,Jquery,我正在尝试使用.animate()函数(我用粗体标记了它)从右向左滑动一系列分割,这是可行的。然而,我不能向后滚动到左边,因为看起来左边的宽度(用来容纳分区)被放置到了右边,这实际上是一个空白 以下是CSS: div.folders-hierarchy { border: 1px dotted #ccc; border-radius: 5px; height: 300px; margin: 10px 0; padding: 0 0 0 0; ove

我正在尝试使用.animate()函数(我用粗体标记了它)从右向左滑动一系列分割,这是可行的。然而,我不能向后滚动到左边,因为看起来左边的宽度(用来容纳分区)被放置到了右边,这实际上是一个空白

以下是CSS:

div.folders-hierarchy {
    border: 1px dotted #ccc;
    border-radius: 5px;
    height: 300px;
    margin: 10px 0;
    padding: 0 0 0 0;
    overflow: auto;
    width: 325px;
    -moz-border-radius: 5px;
}

div.folders-hierarchy .container-folders {
    right: 0px;
    position: relative;
    width: 0px;
}

div.folders-hierarchy .container-folders .container-folder {
    float: left;
    width: 325px;
}

div.folders-hierarchy ul {
    margin: 0 5px;
    width: 315px;
}

div.folders-hierarchy ul input[type="radio"] {
    margin: 0 2px;
}

div.folders-hierarchy ul li {
    border: 1px solid #ccc;
    border-radius: 5px;
    list-style-type: none;
    margin: 5px 0;
    padding: 5px 10px;
}
以下是HTML:

<div class="folders-hierarchy">
    <div class="container-folders"></div>
</div>

下面是jQuery:

$(document).ready(function(){
    var folders = new Object();
    var levels = new Object();
    var id;
    var container = 325;
    var slide = 0;
    levels.index = 0;
    folders.chosen = (folders.chosen == null) ? 0 : folders.chosen;
    $(".folders-hierarchy").delegate('li a', 'click', function(event) {
        event.preventDefault();
        id = parseInt($(this).attr("data-folder"));
        levels.chosen = parseInt($(this).closest('ul').attr("data-levels"));
        folders.chosen = id;
        if (levels.chosen < levels.index) {
            if (levels.index > 1) {
                x = (levels.index+1);
                for (var i=0;i<x;i++) {
                    if (i > levels.chosen) {
                        $('[data-levels="' + i + '"]').parent().remove();
                    }
                }
            } else {
                $('[data-levels="1"]').parent().remove();
            }
            levels.index = (levels.chosen+1);
        } else {
            levels.index++;
        }
        $(".container-folders").css('width', (container = (container+325)) + 'px');
        **$(".container-folders").animate( { right: slide = (levels.index < 1) ? 325 : (slide+325) }, 250);**
        get_folders_hierarchy(folders);
    })
    function get_folders_hierarchy (folders) {
        $.ajax({
            url: base_url + "folders/jq_get_folders_hierarchy/" + folders.chosen,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (element) {
                $("div.container-folders").append('<div class="container-folder"><a name="level-' + levels.index + '"></a><ul id="folders-hierarchy-' + folders.chosen + '" data-levels="' + levels.index + '">');
                if (element!=null) {
                    for (var i=0;i<element.length;i++) {
                        $("#folders-hierarchy-" + folders.chosen).append('<li><input type="radio" value="' + element[i].child + '" name="folders[]" /><a href="#level-' + (levels.index+1) + '" data-folder="' + element[i].child + '">' + element[i].name + '</a></li>');
                        if (i==(element.length)-1) {
                            folders.chosen = element[i].parent;
                        }
                    }
                } else {
                    $("#folders-hierarchy-" + folders.chosen).append('<li><input type="radio" value="' + folders.chosen + '" name="folders[]" />Choose this Folder</li>');
                }
                $("div.container-folders").append('</ul></div>');
            }
        });
    }
    get_folders_hierarchy(folders);
});
$(文档).ready(函数(){
var folders=新对象();
变量级别=新对象();
变量id;
var=325;
var滑动=0;
水平指数=0;
folders.Selected=(folders.Selected==null)?0:folders.Selected;
$(“.folders hierarchy”).delegate('LIA','click',函数(事件){
event.preventDefault();
id=parseInt($(this.attr(“数据文件夹”));
levels.selected=parseInt($(this).closest('ul').attr(“数据级别”);
folders.selected=id;
if(levels.selected1){
x=(levels.index+1);
用于(变量i=0;i个级别。已选择){
$(“[data Level=“”+i+“]”)父项().remove();
}
}
}否则{
$('[data levels=“1”]').parent().remove();
}
levels.index=(levels.selected+1);
}否则{
指数++;
}
$(“.container folders”).css('width',(container=(container+325))+'px');
**$(“.container folders”).animate({right:slide=(levels.index<1)?325:(slide+325)},250)**
获取文件夹层次结构(文件夹);
})
函数获取文件夹层次结构(文件夹){
$.ajax({
url:base_url+“folders/jq_get_folders\u hierarchy/”+folders.selected,
contentType:“应用程序/json;字符集=utf-8”,
数据类型:“json”,
cache:false,
成功:功能(元素){
$(“div.container-folders”).append(“”);
if(i==(element.length)-1){
folders.Selected=元素[i]。父级;
}
}
}否则{
$(“#文件夹层次结构-”+文件夹。已选择)。追加(“
  • 选择此文件夹”
  • ”); } $(“div.container-folders”).append(“”); } }); } 获取文件夹层次结构(文件夹); });
    我怀疑它是一个浮子或什么的,但我就是看不出是哪个,在哪里,或者更重要的是,为什么


    也。但是,由于数据是如何组合的,提供JSON数据是不实际的。

    请提供一个提琴好吗?Derek,我添加了一个到开始主题的链接。但是,我不能提供任何JSON数据;要挖掘出所有不同文件夹及其下属的所有文件夹数据太复杂了。我也是通过复制和粘贴代码创建了这把小提琴。但是它遗漏了太多东西,在调试中没有任何用处,这就是为什么我要求一些东西。