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

それはすべてここで説明されています：

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 に投稿したばかりの非常にクールなチュートリアルです。JQuery の .slideUp() と .slideDown() を使用して、ソーシャル バーを表示/非表示にします。

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

それが役に立てば幸い！

注: スライドの代わりにフェードしたい場合は、.slideUp() を .fadeout() に、.slideDown() を .fadeIn() に置き換えてください。

于 2013-12-21T23:18:01.287 に答える