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/

Answer 2

你需要将jQuery .height() method

• You参数设置为jQuery .stop() method

• You的实际高度，然后用“

1. ”和"mouseleave“来更改你的mouse events绑定，然后用"mouseleave”来停止jQuery元素的动画。jQuery .height() method也可以计算这个高度。

Answer 3

我认为animate对于单个动画效果更有用，而不是连续和可变的变化。您可以使用一定的时间间隔自己实现此功能。

var interval;

$("#down").mouseenter(function () {
    interval = setInterval(ScrollDown, 100);
});

$("#down").mouseleave(function () {
    clearInterval(interval);
});

function ScrollDown() {
    $('.scroll').css("marginTop", "+=50px");
    // check bounds here to solve problem #1
}

/* do the same stuff for scrolling up */