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;
});
});
この記事が気に入ったらサポートをしてみませんか?