如何使用 jQuery 为元素设置动画？答案

【问题标题】：How do I animate elements with jQuery?如何使用 jQuery 为元素设置动画？
【发布时间】：2009-12-20 20:45:26
【问题描述】：

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

编辑：

我现在正在尝试在鼠标悬停时更改元素的背景颜色（我也想最终交换背景图像，但现在不是……）

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

  //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");                
  });

【问题讨论】：

标签： jquery animation jquery-animate

【解决方案1】：

首先，阅读documentation 的animate。

然后，您必须通过 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 与绝对左侧值不匹配），则此方法有效。

【讨论】：

我认为有更好的方法来处理绝对定位： $("#element").animate({left: "+=10px"}, 500); ...api.jquery.com/animate

【解决方案2】：

对于彩色动画，需要使用jQuery color插件。

您可以在导入 jQuery Color 插件时使用animate() 为颜色设置动画。

【讨论】：

谢谢，只是好奇为什么我不能使用 animate{}。另外，如何使用插件？我要添加另一个脚本标签吗？
如何使用 jQuery 插件取决于它的文档。只需按照 jQuery Color 插件网站上的说明进行操作，就可以了。

【解决方案3】：

在考虑位置动画时，您需要记住，您仍然只是在玩 CSS。因此，在您想要向左滑动一点的情况下，您需要调整左侧边距（或者可能在右侧添加填充，具体取决于您现有的样式和布局）。

例如：

$("#myElement").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

This site 有一些关于基本动画的有用内容，当然还有实际的jQuery documentation。

【讨论】：

【解决方案4】：

我真的很喜欢这个网站，它是一个很好的关于 jQuery 的资源

jQuery for Designers

【讨论】：