Javascript CSS3 Div动画相对间距

最近我问了一个类似的问题，关于divs中的过渡动画。（）

下面的代码片段显示了我的解决方案。
但是，仅当宽度以像素为单位而不是以百分比为单位时，动画才起作用
有人知道怎么解决这个问题吗

编辑（更多信息以澄清我的问题）：

在网站的这一部分，我有一个标题应该始终保持不变，还有3页内容可以在用户输入时“刷”掉。
因此，页面左边距的范围为-100%到+100%

我想要一个滑动动画，这样用户可以从第2页（即显示图像）切换到第3页（即与图像相关的文本）

由于浏览器窗口大小不同，我需要以百分比表示宽度。可悲的是

$（文档）.ready（函数（）{
$（“.next”）。单击（函数（）{
var current=$（“.container”）.css（“左”）；
如果（电流=“-200px”）{
电流=“-400px”；
}否则如果（当前=“0px”）{
电流=“-200px”；
}
$（“.container”）.css（“左”，当前）；
});
$（“.prev”）。单击（函数（）{
var current=$（“.container”）.css（“左”）；
如果（电流=“-200px”）{
当前=“0px”；
}否则如果（电流=“-400px”）{
电流=“-200px”；
}
$（“.container”）.css（“左”，当前）；
});
});
.row{
边框：1px纯黑；
高度：200px；
保证金：0；
宽度：200px；
填充：0；
显示：块；
位置：相对位置；
溢出：隐藏；
}
.集装箱{
高度：200px；
保证金：0；
宽度：600px；
填充：0；
显示：块；
位置：绝对位置；
左：-200px；
排名：0；
-webkit过渡：左0.5s易入易出；
-moz过渡：左0.5s缓进输出；
过渡：左0.5s缓进缓出；
}
.ins{
宽度：200px；
浮动：左；
高度：200px；
保证金：0；
填充：0；
背景色：红色；
}
.1分部{
背景色：红色；
}
.第2分部{
背景颜色：绿色；
}
.第3分部{
背景颜色：蓝色；
}

标题
第一组
第2组
第3组
上
下一个
我更改了单个元素上变换的左侧位置：

现在，类行也被设置为占据整个浏览器宽度。容器类是se到300%（因为它将为3个元素腾出空间）。孩子们被设置为这一行的33%，最后是这一行的100%


var pos=2；/*值1-2或3*/
$（文档）.ready（函数（）{
$（“.next”）。单击（函数（）{
如果（位置==1）{
$（“.container”）.removeClass（“pos1”）；
$（“.container”）.addClass（“pos2”）；
pos++；
}否则如果（位置==2）{
$（“.container”）.removeClass（“pos2”）；
$（“.container”）.addClass（“pos3”）；
pos++；
}
});
$（“.prev”）。单击（函数（）{
如果（位置==3）{
$（“.container”）.removeClass（“pos3”）；
$（“.container”）.addClass（“pos2”）；
pos--；
}否则如果（位置==2）{
$（“.container”）.removeClass（“pos2”）；
$（“.container”）.addClass（“pos1”）；
pos--；
}
});
});
.row{
边框：1px纯黑；
高度：200px；
保证金：0；
宽度：100%；
填充：0；
显示：块；
位置：相对位置；
溢出：隐藏；
}
.集装箱{
高度：200px；
宽度：300%；
保证金：0；
填充：0；
显示：块；
位置：绝对位置；
排名：0；
}
.ins{
宽度：33.33%；
高度：200px；
保证金：0；
填充：0；
浮动：左；
过渡：0.5s缓进缓出转换；
}
.1分部{
背景色：红色；
}
.第2分部{
背景颜色：绿色；
}
.第3分部{
背景颜色：蓝色；
}
.pos2.ins{
转化：translateX（-100%）；
}
.pos3.ins{
转化：translateX（-200%）；
}

标题
第一组
第2组
第3组
上
下一个
Narusan

如果我正确理解了您的目标，那么问题的一部分是，不管怎样，jQuery都希望将px单元返回给您。您可以设置一个百分比值，但它似乎不会将这些百分比返回给您

我更改了您的代码以演示这一点：


$（文档）.ready（函数（）{
$（“.next”）。单击（函数（）{
var current=$（“.container”）.css（“左”）；
console.log（当前）；
如果（电流=“-200px”| |电流=“-100%”）{
电流=“-200%”；
}否则如果（当前=“0%”）{
电流=“-100%”；
}
$（“.container”）.css（“左”，当前）；
});
$（“.prev”）。单击（函数（）{
var current=$（“.container”）.css（“左”）；
console.log（当前）；
如果（电流=“-200px”| |电流=“-100%”）{
当前=“0%”；
}否则如果（当前=“-200%”）{
电流=“-100%”；
}
$（“.container”）.css（“左”，当前）；
});
});应该用什么百分比值来代替
px
单位？100%（我希望它填满整个浏览器窗口）的宽度和大约80%的高度。这并不完全是我想要的（至少我看不到一种方法可以使它按照编辑中描述的方式工作）。但无论如何，非常感谢你对我的帮助！我用更多的信息编辑了我的问题，这样我的问题和目标就更清楚了。我改变了一些宽度。幸运的是，大部分布局可以保持不变。非常感谢。对不起，我必须更清楚地说明我的目标。我已经编辑了我的问题，希望现在更容易理解。谢谢你的帮助！