有没有办法使用 jQuery animate 函数对固定位置图像进行动画处理？

发布于 2024-11-01 14:53:21 字数 715 浏览 0 评论 0原文

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

原文

I have some social icon links at the side of my web page and they are positions using CSS position:fixed so that they don't move when the rest of the page is scrolled.

The icon images are 90px wide and what I've also done is position them mostly off-screen so that only 15px of them are visible until mouseover - then the rest of them appear. I accomplish this using CSS and the .hover attribute but they just 'pop' out by doing it this way.

I'd like to have smoothy slide out and it seems to me the best way to do this would be to use the jquery animate function however I have absolutely no idea how to do it.

Here's the CSS I'm currently using to shift the images ....

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

and the html ...

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开半夏魅人心 2024-11-08 14:53:21

查看 .animate() 文档。

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

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

Have a look at the .animate() documentation.

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

NB. You'll want to remove that :hover class in the CSS first.

回复收藏 0 原文

~没有更多了~