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

Question

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

小条是一个图像，我正在使用 jQuery animate 函数对其 CSS 进行动画处理。

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

我需要那个酒吧总是完美契合。

我的小提琴的问题是我使用图像

Answer 1

您不必为每个项目重复自己，而是可以为所有项目编写一个函数：

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

小提琴

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