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

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

デモ

Answer 2

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 3

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

そして、ここにデモがあります