动画图像的css给出不同的结果

Question

我有一个菜单和一个小栏，后面跟着<a>我在菜单中悬停的标签。

小条形图是一个图像，我用jQuery动画函数设置它的CSS动画。

我的问题是，当我使用不同的时候，我的小酒吧位置有点不同 浏览器或其他分辨率。

我需要那个酒吧才能完美契合。

my fiddle的问题在于我使用了图片

Answer 1

对于每个项目，您没有repeat yourself，而是可以为所有项目编写单个函数：

$("#smallMenu a").mouseover(function(){
    var $this = $(this),
        os = $this.offset();
    $("#smallBar").clearQueue().animate({
        left: os.left,
        top: os.top + $this.height(),
        width: $this.width()
    });
});

Fiddle

这会将栏设置在悬停链接的同一left位置 - os.left - 并且位于悬停链接本身 - os.top + $this.height() - 的下方 - 与链接的宽度相同 - $this.width()，与页面中的位置或大小无关。您可以根据需要调整它（您可以添加或获取位置和宽度的像素）。