Question

怎么说，使用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");                
  });

Answer 1

首先，请阅读animate的{{3}}。

然后，您必须定义要移动的元素，以便通过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);

如果＃元素的父元素静态定位（否则offset（）。left与绝对左值不匹配），这是有效的。

Answer 2

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

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

Answer 3

在考虑位置动画时，你需要记住你还在玩CSS。因此，在您想要向左滑动一点的情况下，您将需要调整左侧边距（或者可能根据您现有的样式和布局向右侧添加填充）。

例如：

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

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

Answer 4

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

jQuery for Designers

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

4 个答案: