Javascript 如何在jQuery中制作这个简单的动画？

当用户点击导航链接时，我需要底部的图像在它下面滑动。有点像jQuery lavalamp插件：

但点击时，它应该位于导航项下方，而不是悬停

以下是我的尝试：

jQuery：

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

HTML:

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

您有两个问题：

你必须调整宽度

您只需将

设置为左侧

，而不是增加它

尝试类似的方法：

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

这是你的小提琴：

---

不久前我也做过类似的事情：
在这里查看：（将鼠标悬停在菜单上），
这里：（将鼠标悬停在幻灯片下方的矩形上）。

您有两个问题：

你必须调整宽度

您只需将

设置为左侧

，而不是增加它

尝试类似的方法：

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

这是你的小提琴：

---

不久前我也做过类似的事情：
在这里查看：（将鼠标悬停在菜单上），
这里：（将鼠标悬停在幻灯片下方的矩形上）

这里有一个

这是一个

$（'nav ul li a'）。单击（函数（e）{
e、 预防默认值（）；
var ctl=$（e.target）.position（）.left，
t=$（'span#底图'），
tl=t.偏移量（）.左，
w=t.宽度（）/2，
a=ctl-tl+w，
s=a<0？'-'：'+'；
t、 停止（）。设置动画({
左：s+'='+Math.abs（a）+'px'
}, 300);
});

$（'nav ul li a'）。单击（功能（e）{
e、 预防默认值（）；
var ctl=$（e.target）.position（）.left，
t=$（'span#底图'），
tl=t.偏移量（）.左，
w=t.宽度（）/2，
a=ctl-tl+w，
s=a<0？'-'：'+'；
t、 停止（）。设置动画({
左：s+'='+Math.abs（a）+'px'
}, 300);
});

---

您总是在左侧添加像素，因此偏移量总是在增加。尝试比较单击的偏移量是否大于或小于实际偏移量（在变量上保存之前），然后根据需要求和或减法。您总是在左侧添加像素，因此偏移量总是在增加。尝试比较单击的偏移量是否大于或小于实际偏移量（在var上保存之前），然后根据需要求和或减法。

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

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

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