jQuery覚書き

◯setTimeout

JavaScript、jQueryでfunctionを“何秒後”に実行と指定できる。   $(function(){ $('#btn_box01').click(function(){ setTimeout(function(){ if ($('#detail01').css('display') == 'none') { $('#detail01').slideDown('slow'); } else { $('#detail01').slideUp('fast'); } }, 600); }); }); <参考URL>http://bl6.jp/web/javascript/settimeout-run-timing/

◯slideDown、slideUp

クリックで開閉するアコーディオンを実装。
<span id="slide">ここをクリック</span> <p id="target" style="display: none;"> なんか表示</p>
$('#slide').click(function(){ if ($('#target').css('display') == 'none') { $('#target').slideDown('slow'); } else { $('#target').slideUp('fast'); } });
<参考URL>http://yurubu.org/jquery%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89-slideup-slidedown/299

◯スムーススクロール用JavaScript

$(function(){ // #で始まるアンカーをクリックした場合に処理 $('#btn_box01').click(function() { // スクロールの速度 var speed = 400;// ミリ秒 // アンカーの値取得 var target = $('#detail_top01'); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
<script src="js/jquery-1.7.2.min.js"></script> <style> #btn_box01{ margin:500px 0 0 0; } </style> <p id="detail_top01"> TOP</p> <p id="btn_box01"> to TOP</p>
<参考URL>http://www.coolwebwindow.com/weblife_column/coolweb/000301.php