【jQuery】fadeOutとslideUp

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

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

 本記事の内容

・jQueryのfadeOutとslideUp

  1. jQueryのfadeOutとslideUp
  2. まとめ

jQueryのfadeOutとslideUp

jQueryの fadeOut と slideUp を使った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秒
となっています。ちなみにボタンを押した時の動作に fadeOut と slideUp を利用しました。
$('#a').on('click',function(){
$('#a').fadeOut(5000);
});
$('#b').on('click',function(){
$('#b').slideUp(5000);
});

まとめ

Toshi
Toshi

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

コメント

  1. www.linux.org より:
    2017年9月14日 06:26

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

    返信
  2. Manhattan Dental in NY より:
    2017年9月15日 19:39

    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 より:
    2017年9月15日 20:30

    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. markets.financialcontent.com より:
    2017年9月16日 07:14

    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. game untuk android より:
    2017年9月16日 19:48

    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 より:
    2017年9月17日 22:41

    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 より:
    2017年9月18日 21:44

    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 より:
    2017年9月19日 03:26

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

    返信
  9. dental care center より:
    2017年9月19日 18:03

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

    返信
  10. Flor より:
    2017年9月20日 14:50

    You could certaіnly see your skills in the work you write.
    The world hopｅs 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 より:
    2017年9月22日 05:50

    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. business Success- より:
    2017年9月22日 10:06

    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 より:
    2017年9月22日 15:02

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

    返信
  14. Lara Escort より:
    2017年9月24日 11:01

    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. escape room frisco より:
    2017年9月24日 19:52

    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. www.virsale.com より:
    2017年9月27日 01:07

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

    返信
  17. https://www.youtube.com/watch?v=1OomciIoXmk より:
    2017年11月21日 12:41

    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. Villa Verona Home Furnishings より:
    2017年12月21日 23:34

    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.

    返信