jQuery在悬停时滚动到div并返回第一个元素 [英] jQuery scroll to div on hover and return to first element

问题描述

我基本上有一个具有设置尺寸和overflow: hidden的div.该div包含7个子div(但一次仅显示一个)，当它们各自的链接都悬停时，我希望可以平滑地垂直滚动.

I basically have a div with set dimensions and overflow: hidden. That div contains 7 child divs (but only shows one at a time) that I would like to be smoothly scrolled through vertically when their respective links are hovered.

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

However, the first section (div) doesn't have a link and is the default section when no link is hovered.

看看这个jsFiddle，看看我在说什么的基本结构: http://jsfiddle.net/YWnzc/

Take a look at this jsFiddle to see a basic structure of what I'm talking about: http://jsfiddle.net/YWnzc/

我曾尝试使用jQuery scrollTo完成此操作，但未能使其正常工作.

I've attempted to accomplish this with jQuery scrollTo but haven't been able to get it to work.

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

Any help would be greatly appreciated. Thanks.

推荐答案

像这样吗?

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();
});

这篇关于jQuery在悬停时滚动到div并返回第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！