javascript - 如何在 jQuery 中做这个简单的动画？

Question

当用户单击导航链接时，我需要底部图像以良好的滑行方式出现在其下方。有点像 jQuery lavalamp 插件：

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

但不是悬停它应该在点击导航项下方。

这是我的尝试：

http://jsfiddle.net/e88CL/

jQuery：

$('nav ul li a').click(function(e) {
    e.preventDefault();
    $('span#bottom-image').animate({
        left: '+=' + $(this).offset().left + 'px'
    }, 1000);
});    

HTML：

<nav>
    <ul>
        <li>Most Popular:</li>
        <li><a href="#">This Week</a></li>
        <li><a href="#">This Month</a></li>
        <li><a href="#">All Time</a></li>
    </ul>
    <span id="bottom-image"></span>
</nav>

CSS：

 nav { position: relative; border: 1px solid red; overflow: hidden; padding-bottom: 20px; }
 nav ul {}
 nav ul li { float: left; }
 nav ul li a { display: block; padding: 0 50px; }

 span#bottom-image { width: 100px; height: 10px; background: red; position: absolute; bottom: 0; left: 0; }

正如您在小提琴中看到的那样，它并没有完全做到它应该做的事情。如何做到这一点？

Answer 1

你有2个问题：

1. 你必须调整宽度。

2. 你只需要设置left，而不是增加它。

尝试类似的事情：

$('nav ul li a').click(function(e) {
    e.preventDefault();
    $('span#bottom-image').animate({
        left: $(this).offset().left,
        width: $(this).outerWidth()
    }, 300);
});

这是你的小提琴：http: //jsfiddle.net/e88CL/1/

---

不久前我做过类似的事情：
在此处查看：natrazyle.com（将鼠标悬停在菜单上）
和此处：happyheartwsine.com（将鼠标悬停在幻灯片下方的矩形上）。

Answer 2

$('nav ul li a').click(function(e) {
    e.preventDefault();
    $('span#bottom-image').animate({
        left: $(this).offset().left + $(this).width()/2 + 'px'
    }, 1000);
});​

这是一个演示

Answer 3

$('nav ul li a').click(function(e) {
    e.preventDefault();
    var ctl = $(e.target).position().left,
        t = $('span#bottom-image'),
        tl = t.offset().left,
        w = t.width()/2,
        a = ctl - tl + w,
        s = a < 0 ? '-' : '+';
    t.stop().animate({
        left: s + '=' + Math.abs(a) + 'px'
    }, 300);
});

演示