0

我想用 jQuery 制作社交图标栏。我第一次尝试使用 CSS3，但我不喜欢动画。我想要淡入淡出效果，但我不知道如何使用 jQuery 来实现。

        <div id="social">
            <ul>
                <li><a class="twitter" href="#">Twitter</a></li>
                <li><a id="deviantart" href="#">Deviantart</a></li>
                <li><a id="dribbble" href="#">Dribbble</a></li>
                <li><a id="info" href="#">Info</a></li>
            </ul>
        </div>

a.twitter {
    background: url(img/twitter.png) no-repeat;
    width: 31px;
    height: 31px;
} 
a.twitter:hover {
background-position: left bottom;
}

经过几个小时的搜索和试验，我终于来到了这里。jsfiddle.net/CkUXB

4

3 回答 3

1

It's all explained here :

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

于 2011-08-14T14:51:41.303 回答
0

我认为这就是你想要的：

现场演示

于 2011-08-14T15:42:25.073 回答
0

这是我刚刚在 GitHub 上发布的一个非常酷的 tut。它使用 JQuery 的 .slideUp() 和 .slideDown() 来显示/隐藏社交栏。

https://github.com/YupItsZac/JQuery/tree/master/SocialDropBar

希望能帮助到你！

注意：如果你想淡入淡出而不是滑动，只需将 .slideUp() 替换为 .fadeout() 并将 .slideDown() 替换为 .fadeIn()

于 2013-12-21T23:18:01.287 回答