如何让 jQuery 在鼠标悬停在链接上时向下滚动一个 div（到另一个 div）？

Question

很难解释，我知道.. 特别是因为我完全不熟悉编程概念。

但我想在鼠标悬停在右侧链接上时更改徽标，使其与链接相对应。我希望它具有动画效果，以便它“滚动”过去所有其他徽标以找到正确的徽标，这有点像某些网站最近一直在做的事情。

所有徽标都包含在一个 div 中，并且都有自己的类（如果需要）。链接也是如此。

我相信你们中的一个 jQuery 迷可以通过几行代码来解决这个问题.. 或者给我一个教程。请帮帮我！

编辑：好的，虽然 jAndy 的提交非常方便，但我一直不知道如何编写代码。我这样做是否正确？

<div id="nav">
    <div id="nav_left">
        <h1 class="home"><em>name</em>:home</h1>
        <h1 class="about"><em>name</em>:about</h1>
        <h1 class="folio"><em>name</em>:folio</h1>
        <h1 class="contact"><em>name</em>:contact</h1>
    </div>
    <div id="nav_right">
        <ul>
            <li><a href="#" class="lhome">Home</a></li>
            <li><a href="#" class="labout">About Me</a></li>
            <li><a href="#" class="lfolio">Portfolio</a></li>
            <li><a href="#" class="lcontact">Contact Me</a></li>
        </ul>
    </div>
</div>

Answer 1

Easy going 看起来与此示例类似：

$('a.MyAnchorClass').bind('mouseenter', function(){
    $('div.MyDivClassWithLogos').animate({
       'scrollTop':    $('img.MyImgClass').offset().top
    }, 1500);
});

示例：http://jsbin.com/uliti3/2/edit

$(document).ready(function(){
    $('#nav_left').find('h1').each(function(i,v){
       $.data(this, 'pos', $(this).offset());
    });

    $('#nav_right').find('a').bind('mouseenter', function(e){
       var _target = '.' + e.target.className.substr(1);

       $('#nav_left').stop(true, false).animate({
           'scrollTop':  $(_target).data('pos').top
       }, 1500);
    });
});

Answer 2

查看 Ariel Fleslers scrollTo 插件

Answer 3

虽然 jAndy 的答案可能是你想要的......我想我会分享在这个 demo 中看到的另一种方法

我使用菜单系统回答了previous question，该菜单系统通过在单击后滚动 div 来工作。我只是通过将click 更改为mouseover 来更新演示。