jQuery在悬停时滚动到div并返回到第一个元素

Question

我基本上有一个设定尺寸的div overflow: hidden.该div包含7个子div(但一次只显示一个),当我们各自的链接悬停时,我希望能够平滑地滚动它们.

但是,第一部分(div)没有链接,并且是没有链接悬停时的默认部分.

看看这个jsFiddle,看看我所说的基本结构:http://jsfiddle.net/YWnzc/

我试图用jQuery scrollTo来完成这个,但是还没能让它工作.

任何帮助将不胜感激.谢谢.

Answer 1

像这样的东西？

http://jsfiddle.net/YWnzc/5/

码:

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) {
    var i, self = this,
    pos;

    if (e.type == "mouseleave") {
    i = 0;
    }
    else {
    //Find out the index of the a that was hovered
        jQuery("#nav a").each(function (index) {
            if (self === this) {
            i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment
            return false;
            }
        });
    }

    //Find out if the index is a valid number, could be left undefined
    if (i >= 0) {

        //stop the previous animation, otherwise it will be queued
        jQuery("#wrapper").stop().animate({
        scrollTop: i * 200
        }, 500);
        //I would retrieve .offsetTop, but it was reporting false values :/
    }

    e.preventDefault();
});