有没有一种方法可以使用jQuery动画功能设置固定位置图像的动画？

我的网页侧面有一些社交图标链接，它们是使用CSS的位置

position:fixed

，这样当页面的其余部分滚动时它们就不会移动

图标图像的宽度为90像素，我所做的就是将它们大部分放在屏幕外，这样在鼠标移动到屏幕上之前，只有15像素的图像是可见的，然后剩下的图像就会出现。我使用CSS和

.hover

属性来实现这一点，但它们只是通过这种方式“弹出”

我希望平滑滑出，在我看来，最好的方法是使用jquery

animate

函数，但是我完全不知道怎么做

这是我目前用来移动图像的CSS

.floater-side-fb {
    position:fixed;
    bottom: 600px;
    right:-70px;
}
.floater-side-fb a:hover{
    position:fixed;
    bottom: 600px;
    right: -5px;
}

还有html

<div class="floater-side-fb">
<a href="http://www.facebook.com/" target="_blank"><img src="images/facebook-icon.png" /></a>
</div>

请查看文档

$('.floater-side-fb').hover(function() {
    $(this).stop().animate({ 'right': '-5px' }, 'slow', 'linear');
}, function() {
    $(this).stop().animate({ 'right': '-70px' }, 'slow', 'linear');
});

注意。您需要先删除CSS中的

：hover

类。

查看文档

$('.floater-side-fb').hover(function() {
    $(this).stop().animate({ 'right': '-5px' }, 'slow', 'linear');
}, function() {
    $(this).stop().animate({ 'right': '-70px' }, 'slow', 'linear');
});

---

注意。您需要删除该

：首先在CSS中悬停
类。
如果您想要使用CSS3，您可以在
规则中添加适当的
转换
属性；将
transition
、
-webkit transition
、
-moz transition
、
-o-transition
和
-khtml transition
设置为
右侧0.5s缓进/缓出
，其中
0.5s
为持续时间。您可能更喜欢它，尽管它目前只适用于Safari、Chrome和Firefox4（就主流浏览器而言）。我建议改为使用它的原因是，它允许您保持
：悬停
，代码非常干净，加上非常轻松的选项和效率（浏览器代码比JavaScript快）。我认为您不应该在另一个固定元素中有一个固定元素element@minitech：在所有主要浏览器都支持功能之前，很难提倡使用它们。网站很少有为“部分”市场工作的奢侈；如果你必须编写一个替代方案，那么最好首先使用它。好吧，渐进增强是一个基本的设计原则——例如，为什么有人会尝试为IE6实现
position:fixed
——所以CSS3仍然是可行的。一个小动画不是一个为“某些”市场工作或不工作的问题。该网站将在没有小动画的情况下工作，它只会对有能力的浏览器的人更好。@Minitech-thinki我将忘记jQuery并使用此解决方案。也许这是因为我在CSS方面更为精通——我不知道——但经过测试，我认为这非常棒，对于那些还不支持CSS的浏览器来说。。。他们仍然接受CSS，所以他们会留下不太花哨的弹出式动画，这仍然很好，因为功能仍然存在。谢谢你给我的小费，兄弟-真的非常感谢；）如果您想使用CSS3，只需在
.flotter-side-fb
规则中添加适当的
transition
属性即可；将
transition
、
-webkit transition
、
-moz transition
、
-o-transition
和
-khtml transition
设置为
右侧0.5s缓进/缓出
，其中
0.5s
为持续时间。您可能更喜欢它，尽管它目前只适用于Safari、Chrome和Firefox4（就主流浏览器而言）。我建议改为使用它的原因是，它允许您保持
：悬停
，代码非常干净，加上非常轻松的选项和效率（浏览器代码比JavaScript快）。我认为您不应该在另一个固定元素中有一个固定元素element@minitech：在所有主要浏览器都支持功能之前，很难提倡使用它们。网站很少有为“部分”市场工作的奢侈；如果你必须编写一个替代方案，那么最好首先使用它。好吧，渐进增强是一个基本的设计原则——例如，为什么有人会尝试为IE6实现
position:fixed
——所以CSS3仍然是可行的。一个小动画不是一个为“某些”市场工作或不工作的问题。该网站将在没有小动画的情况下工作，它只会对有能力的浏览器的人更好。@Minitech-thinki我将忘记jQuery并使用此解决方案。也许这是因为我在CSS方面更为精通——我不知道——但经过测试，我认为这非常棒，对于那些还不支持CSS的浏览器来说。。。他们仍然接受CSS，所以他们会留下不太花哨的弹出式动画，这仍然很好，因为功能仍然存在。谢谢你给我的小费，兄弟-真的非常感谢；）