Jquery -webkit变换：使用位置：绝对

我有一系列的div，使用

-webkit transform

从负边距顶部滑到屏幕上的某个位置。问题是，若并没有对它们应用负边际上限，它们最终会回到通常的位置

这意味着如果我显示第二个div，它上面有一个与第一个div大小相同的空白。为了解决这个问题，我可以对第二个div应用一个负的边距top，但我认为这很混乱

我主要担心的是，如果dropdiv1的高度发生变化，则我必须重置单击函数上的值，以便在显示时使其他Div再次正确对齐

有没有办法修改

-webkit transform

以合并position:absolute

我目前的代码是：

CSS:

JQuery：

$('#clickme1').click(
                      function() {
                      $('#dropdiv1').css('-webkit-transform','translate(0, -335px)');
                      });

  $('#clickme2').click(
                        function() {
                        $('#dropdiv2').css('-webkit-transform','translate(0, -2335px)');
                        });

  $('#clickme3').click(
                        function() {
                        $('#dropdiv3').css('-webkit-transform','translate(0, -3300px)');
                        });

HTML:

大量随机文本。。。。
大量随机文本。。。。
大量随机文本。。。。

我真的看不到设置

位置：绝对位置动画的任何逻辑行为

这将更容易阅读：

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
}
#dropdiv1.anim {
    -webkit-transform: translate(0, -335px);
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
}
#dropdiv2.anim {
    -webkit-transform: translate(0, -2335px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
}
#dropdiv3.anim {
    -webkit-transform: translate(0, -3300px);
    -webkit-transition: all ease-in 1s;
}

然后添加类

$('#dropdiv3').addClass('anim');

或者在应用
position:absolute
之前运行
.offset（）
，并使用
top
和
left
进行动画制作。
好的，我找到了一种解决方案。仍然凌乱，但还行：

<div id="bigcontainer">
    <ul class="mainmenu">
     <li><a id="clickme1" href="#">Click Me 1</a></li>
                    <div class="showdata"  id="dropdiv1">
                        Lots of random text....
                </div>
 <li><a id="clickme2" href="#">Click Me 2</a></li>
                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
</ul>
</div>

不特别是一个球迷，但它会做
 谢谢你，罗宾，但是我更担心的是，如果我必须添加更多的内容来表示dropdiv1，那么这将需要我重置所有其他Div的负面位置-例如：如果我将20px添加到driodiv1的高度，那么我必须将20px添加到其他Div，以确保它们在显示时再次正确对齐。您是否可以创建一个测量和定位三个盒子一致，在高度或内容变化时运行？嗯，我真的没有这样做的技能水平。。。这可以通过z指数或绝对位置来实现吗？抱歉，但我开始对你真正想要的东西感到困惑。是的，这有点难以解释。我已经添加了上面的HTML来尝试和帮助。基本上，尽管3个dropdiv在被点击之前被“隐藏”在页面上方，但在ul下方仍然有空白区域，它们通常会坐在那里。例如，如果我单击clickme2以显示dropdiv2，它将显示在页面的中间，上面的空白是dropdiv1的高度，下面的空白是dropdiv3的高度。因此，我使用了负页边距将其进一步定位到页面上方。。。希望有帮助！
$('#dropdiv3').addClass('anim');

<div id="bigcontainer">
    <ul class="mainmenu">
     <li><a id="clickme1" href="#">Click Me 1</a></li>
                    <div class="showdata"  id="dropdiv1">
                        Lots of random text....
                </div>
 <li><a id="clickme2" href="#">Click Me 2</a></li>
                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
</ul>
</div>

#bigcontainer {
height: 1500px;/*as big as the bigest dropdiv to enable scrolling*/
}    

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
    z-index: 1;
    position: absolute;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
    z-index: 2;
    position: absolute;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
    z-index: 3;
    position: absolute;
}