【jQuery】fadeOutとslideUp

Javascript
スポンサーリンク
Toshi
Toshi
今回は、jQueryで簡単にアニメーションをつけてみようということでfadeOutとslideUpを使用しました。fadeOutとslideUpの書き方について簡単に説明させていただきます!

今回解説していく内容は以下です!

 本記事の内容

・jQueryのfadeOutとslideUp


スポンサーリンク

jQueryのfadeOutとslideUp

jQueryの fadeOutslideUp を使ったDEMOを以下に作ってみました!

どちらも消えるボタンになっています。

HTML
<button id="a">消えるボタン</button>
<button id="b">動くボタン</button>
//HTML側でボタンを設置し、idを指定してあげます。
jQuery
<script type="text/javascript" src="URL">
$('#a').fadeOut(5000); //消えるボタン
$('#b').slideUp(5000); //動くボタン

今回のポイントとしては

・$(‘セレクタ’).メゾット(); 
です。$はjQueryと記載することもでき、まずは以下の jQuery を使うために以下のコードをサイトのヘッダー(<head>)で読み込ませます。
<script type=”text/javascript” src=”https://js.cybozu.com/jquery/2.2.4/jquery.min.js”>
これで、jQueryが使えるようになりました。2.2.4と書いていますが、これはバージョンです。
$(‘セレクタ’).メゾット(); ということですが、セレクタは HTML のタグに  id を入れ込み <button id=”a”> そのセレクタをどうするのか?メゾットで決めていきます。メゾットは動きを表現していて fadeOut(ゆっくりフェイドアウト)するかslideUp(うえにスライドしながら消える)かを今回は指定しています。()は速度を指定しおり
(5000) = 5秒
となっています。ちなみにボタンを押した時の動作に fadeOutslideUp を利用しました。
$('#a').on('click',function(){
$('#a').fadeOut(5000);
});
$('#b').on('click',function(){
$('#b').slideUp(5000);
});

まとめ

Toshi
Toshi

いかがでしたか?fadeOutとslideUpの使い方がわかったかと思います。ぜひ、簡単なプログラムを組みながらjQuery等の使い方をマスターしてみてください!

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
Javascript
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント

  1. www.linux.org より:

    I ցuess heѕ PERFECT at it!? Lаughed Laгry.

  2. wonderful points altogether, you just gained a
    logo new reader. What would you recommend about your
    submit that you just made a few days ago?
    Any positive?

  3. agapecare.net より:

    Yesterday, while I was at work, my sister stole my iPad and tested to see if
    it can survive a 30 foot drop, just so she can be a youtube sensation. My apple ipad
    is now broken and she has 83 views. I know this is completely off topic but I had to share it with
    someone!

  4. Thanks on your marvelous posting! I certainly enjoyed reading it, you can be a great author.I will be
    sure to bookmark your blog and definitely will come
    back in the future. I want to encourage that you continue your great work, have
    a nice weekend!

  5. Your style is very unique in comparison to other people I have read
    stuff from. I appreciate you for posting when you have the opportunity, Guess I will
    just bookmark this blog.

  6. dallas hacker より:

    What’s up to every body, it’s my first pay a quick visit of this web site; this weblog includes remarkable and truly excellent information designed for readers.

  7. rlu.ru より:

    whoah this weblog is fantastic i love reading your articles.
    Keep up the great work! You realize, a lot of people
    are hunting around for this information, you could help them greatly.

  8. makerspace より:

    Wow! Finally I got a blog from where I be capable of actually obtain helpful information regarding
    my study and knowledge.

  9. I was able to find good info from your blog posts.

  10. Flor より:

    You could certaіnly see your skills in the work you write.
    The world hopes for even m᧐re passіonate writers like you
    wһo aren’t fraid too say how they believe. All thе time go after your
    heart.

  11. trove より:

    I must thank y᧐u for the effoorts уou have put iin penning this blog.
    I am hoping to check out the same hіgh-gгade content
    from yoou lɑter on aѕ well. In truth, youг creative
    writing abilities has motivated me to get mmy
    own website now 😉

  12. Good day! Do you use Twitter? I’d like to follow you if that would
    be ok. I’m undoubtedly enjoying your blog and look forward to new updates.

  13. Runescape より:

    Ι every tiіme spent my half an hour to read this blog’ѕ
    articles daily aⅼojg with a mug of coffee.

  14. Lara Escort より:

    Hello, I think your website might be having browser compatibility
    issues. When I look at your blog site in Ie, it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads
    up! Other then that, superb blog!

  15. I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but definitely you are going to a famous blogger
    if you are not already 😉 Cheers!

  16. Go᧐d information. Lᥙcky mе I came across yur blog
    by accident (stumbleupon). I’ve swved it for later!

  17. Hi, I do think this is a great web site. I stumbledupon it 😉
    I will revisit once again since i have saved as a favorite it.
    Money and freedom is the best way to change,
    may you be rich and continue to help other people.

  18. I think more writers should write with enthusiasm like
    you. Even content rich articles like this can have personality.

    That’s what you have injected in this helpful post.

    Your opinions are very unique.