DAY25.JavaScript・jQuery学習編 【調べながら実装】jQuery実践課題①

課題に沿ってjQueryのアニメーションを実装

調べれば必ずサンプルコードが見つかるものばかり

「解決する力」を養うため
自分で調べて実装する

自分でjQueryコードを書いて自作

01.ドロワーメニューの実装

①コース一覧をクリックすると
②初級・中級・上級のメニューを表示
③開閉時間の指定は不要

ヒント：表示・非表示や再生・停止を操作するボタンのことをtoggleという

$(function() {
　$('.drawer').click(function() {
　　$('.drawer-list').slideToggle();
　});
});

02.「ページトップへ戻る」ボタンを付ける

①トップから80pxスクロールしたら
②300ms（0.3秒）かけて
③フェードイン・フェードアウトで表示
④表示してる間はボタンはページ右下に固定
⑤ボタンを押したら500ms（0.5秒）かけてページトップへ戻る

$(function() {
　var pagetop = $('#page-top');
　pagetop.hide();
　$(window).scroll(function() {
　　if ($(this).scrollTop() > 80) {
　　　pagetop.fadeIn(300);
　　} else {
　　　pagetop.fadeOut(300);
　　};
　});
　
　pagetop.click(function() {
　　$('body, html').animate({ scrollTop: 0}, 500);
　　return false;
　});
});