【jQuery】ふわっと消えるアニメーション

animation

毎日色々と実験中。
特にアニメーションのキューの理解があんまりできてない。
まずは色々と動かしてみるぜ!!
しかしWorspressだとコードインデントがいちいち入らなくて書きづらいよ~~。どうにかならないのか~~。


デモ


▼下記の画像をクリックすると動作します。ふわっとな。
wackworks logoh80px 【jQuery】ふわっと消えるアニメーション


コード


html

/*何か画像*/
<img id="example" src="http://wakana.me/wp/wp-content/uploads/2013/02/wackworks_logoh80px.png" />

javascript

$(function(){
    $('#example').click(function(){
        $(this).css('position','relative')
        .animate({
        opacity : 0,
        top: $(window).height() - $(this).height() - $(this).position().top
        },
        'slow',
        function(){$(this).hide();
        });
    });
});

1 comment

Leave Comment
  1. 初めまして。
    サイトの中(会員専用画面)で、そのまま使わせていただきました。
    jQueryって、いろいろできるんですね。
    どうもありがとうございました!とても助かりました。
    ちゃんと勉強しなければな…とも、思いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>