jQuery使用两个按钮上下滚动div

Question

我有一个简单的两个按钮,当悬停时应该使div上下移动以模拟滚动效果:

$("#down").hover(function () {

    $('.scroll').animate({ "marginTop": "-=50px" }, "fast");

});

$("#up").hover(function () {

    $('.scroll').animate({ "marginTop": "+=50px" }, "fast");

});

但是我有两个问题:

1.)我需要它在它结束时停止然后隐藏按钮,以便他们知道它们已经到达终点

2.)当用户将鼠标悬停在目标上时,它需要不断滚动,目前它只在鼠标悬停时执行一次,然后在鼠标离开时再次运行.

3.)如果内容不超过父元素高度,则隐藏两个按钮,因为我们不需要滚动它.

有人可以帮忙吗？

我想也许可以通过找出滚动面板的高度并判断其偏移到其保持它的父元素并创建框架视图来解决1？

谢谢

Answer 1

这段代码仍然需要一些调试,但你可以在其中得到这个想法:

$(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        $("#down").hover(function () {
            animateContent("down");
        }, function() { $('.content').stop(); });

        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.content').stop(); });
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content').animate({ "marginTop": animationOffset + "px" }, "fast");
}

代码:http://jsfiddle.net/a89DF/6/