有没有办法使用 jQuery animate 函数为固定位置的图像设置动画？答案

【问题标题】：Is there a way to animate fixed position images with jQuery animate function?有没有办法使用 jQuery animate 函数为固定位置的图像设置动画？
【发布时间】：2011-04-17 19:47:23
【问题描述】：

我的网页侧面有一些社交图标链接，它们是使用 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>

【问题讨论】：

如果你想使用 CSS3，你可以在 .floater-side-fb 规则中添加适当的 transition 属性；将transition、-webkit-transition、-moz-transition、-o-transition 和-khtml-transition 设置为right 0.5s ease-in-out，其中0.5s 是持续时间。您可能更喜欢它，尽管它目前仅适用于 Safari、Chrome 和 Firefox 4（就主要浏览器而言）。我建议它的原因是因为它允许您保留:hover 并拥有非常干净的代码，以及出色的缓动选项和效率（浏览器代码比 JavaScript 更快）。
我认为你不应该在另一个固定元素中包含一个固定元素
@minitech：在所有主流浏览器都支持功能之前，很难提倡使用它们。网站很少有为“某些”市场工作的奢侈；如果您必须编写替代代码，不妨一开始就使用它。
嗯，渐进增强是一个基本的设计原则——例如，为什么有人会尝试为 IE6 实现position: fixed——所以 CSS3 仍然是可行的。小动画不是为“某些”市场工作或不工作的问题。该网站无需小动画即可运行，对于拥有强大浏览器的人来说会更好。
@Minitech - 想想我会忘记 jQuery 并使用这个解决方案。也许是因为我在 CSS 方面更精通——我不知道——但经过测试，我认为它很棒，对于那些还不支持它的浏览器......他们仍然接受他们可以接受的 CSS，所以他们会留下不那么花哨的弹出动画，它仍然很好，因为功能仍然存在。谢谢你的提示兄弟 - 真的非常感谢;）

标签： jquery html css jquery-animate

【解决方案1】：

查看.animate() 文档。

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

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

【讨论】：