Jquery 计算潜水舱的总高度

我想在我的网站上制作一个简单的垂直滑块。用这个简单的代码

$('.down').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '-=410px'}, 1000);
});

$('.up').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '+=410px'}, 1000);
});

---

我可以滑动我的容器，里面的所有东西都可以上下滑动，效果很好。但我遇到的一个问题是，您可以一直按向上或向下按钮，这会完全弄乱div的位置。那么，解决此问题的好方法是什么呢？

可能最好不要依赖相对值，而是计算新的静态值以分配给

.animate（）

另外，对于这样的应用程序，我发现使用CSS

position

和

top

比依赖

margin

更简单。一些（较老的）浏览器似乎对负页边距有一种憎恨，这种厌恶伴随着千层地狱之火而燃烧

// example
var container = $('#container_slider_youtube'),
    parent = container.parent(),
    step = 410
    ;
$('.down').click(function () {

    var currentTop = container.css('top'),
        newTop = Math.max(0, currentTop - step)
        ;

    container.animate({ marginTop : newTop }, 1000);

});

您可以对

进行调整。向上

单击。确保您考虑了容器父容器的高度（很可能使用

.height（）

）

如果要执行CSS

位置

路径，请确保容器父容器至少是

位置：相对的

，并且容器也至少是相同的。我个人将容器设置为

位置：绝对