jquery - 如何使用 jQuery 为元素添加动画效果？

Question

怎么说呢，使用 jQuery 将元素从其初始位置向一侧滑动几个像素？我知道有一个 animate() 函数，但我不知道如何使用它。 提示、教程将不胜感激。

编辑:

我现在尝试更改鼠标悬停时元素的背景颜色(我最终也想交换背景图像，但现在还不行......)

我目前正在使用以下代码。怎么了？ (.link 是一个引用一堆 a 元素的类)

  //light up links on  mouseover
  $(".link").mouseover(function(event){           
    $(this).animate({'color' : '#000099'}, "fast");
  });

  //dim link on mouseout
  $(".link").mouseout(function(event){       
    $(this).animate({'color' : '#efefef'}, "fast");                
  });

Answer 1

首先，阅读 documentation对于动画。

然后，您必须定义要移动的元素，通过 CSS 或 jQuery 将其 position 属性设置为 relative 或 absolute .

如果将其设置为relative，则只需提供要移动它的像素数量即可:

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: 10px
}, 500);

如果您选择绝对定位，则必须首先使用 .offset().left 计算出元素的起始位置，并向其添加所需数量的像素，然后为该位置设置动画。例如:

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: $('#element').offset().left + 10
}, 500);

如果 #element 的父元素静态定位(否则 offset().left 与绝对左值不匹配)，则此方法有效。