Question

我的网页侧面有一些社交图标链接，它们是使用CSS position:fixed的位置，这样当页面的其余部分滚动时它们就不会移动。

图标图像的宽度为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>

Answer 1

查看.animate()文档。

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

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

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

1 个答案: