有没有办法使用jQuery动画功能为固定位置图像制作动画？

我在我的网页边上有一些社交图标链接，他们是使用CSS position:fixed的位置，以便在页面的其余部分滚动时不会移动。有没有办法使用jQuery动画功能为固定位置图像制作动画？

图标图像宽度为90px，我所做的也是将它们大多放在屏幕外，以便只有15px的图像才可见，直到出现鼠标悬停为止 - 然后其余的图像出现。我使用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>

来源

2011-04-17 Alan

如果你想使用CSS3，你可以在'.floater-side-fb'规则中添加合适的'transition'属性;将'transitions'，'-webkit-transition'，'-moz-transition'，'-o-transition'和'-khtml-transition'设置为'right 0.5s ease-in-out'，其中'0.5s'是持续时间。您可能更喜欢它，但它目前仅适用于Safari，Chrome和Firefox 4（主要浏览器）。我之所以推荐它的原因是因为它允许你保留'：hover'并且有非常干净的代码，再加上很好的缓存选项和效率（浏览器代码比JavaScript快）。 – Ryan 2011-04-17 19:54:02

我认为你不应该在另一个固定元素内部有固定元素 – BiAiB 2011-04-17 19:55:33

@minitech：在所有主流浏览器都支持这些功能之前，很难主张它们的使用。网站很少有为“某些”市场工作的奢侈品;如果你必须编写一个替代方案，不妨首先使用它。 – Orbling 2011-04-17 19:55:49

看一看的.animate()文档。

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

NB。您首先要删除CSS中的:hover类。

来源

2011-04-17 19:53:14 Orbling

有没有办法使用jQuery动画功能为固定位置图像制作动画？

回答

相关问题