jquery / css向下滑动但子元素不应该移动

Question

我正在使用jQuery向下滑动div。在div内有4个列表项，其中包含图像和内容。

当父div向上和向下滑动时，内部内容会上下移动。但是，我希望内容保持静态，因此div就像一个屏幕被拉到内部的内容。

有一个例子说明我希望如何在这里工作：http://www.google.co.uk/nexus/

点击“选择设备”链接。

你应该看到里面的图像不是上下移动而是保持静止。

jQuery slideUp / slideDown不会这样做。

这说明了问题：http://jsfiddle.net/uqdGe/1/

红色列与父容器一起上下移动。我希望它们保持静止

Answer 1

看起来slideToggle()在填充.container时缩放填充。不要在容器上放置填充，而是尝试在li上使用边距：

http://jsfiddle.net/xFGPb/1/

li {
    display:inline-block;
    width: 100px;
    margin: 2em 10px 0 0;   /* add 2em margin top */
    background: red;
}

.container {
    background: green;
    padding: 0 2em 2em;    /* remove 2em padding from the top */
}

ul {                       /* css reset */
    margin: 0;
    padding: 0;
}