1

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

4 回答 4

3

首先，阅读.animate

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

如果将其设置为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 与绝对左侧值不匹配），则此方法有效。

于 2009-12-20T20:52:25.390 回答
1

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

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

于 2009-12-21T00:52:35.853 回答
0

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

例如：

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

这个站点有一些关于基本动画的有用内容，当然还有实际的jQuery 文档。

于 2009-12-20T20:53:02.660 回答
0

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

为设计师设计的 jQuery

于 2009-12-20T20:56:38.687 回答