【jQuery最高の教科書】第4章 確かな基礎力を養うjQueryの基本テクニック
①さまざまなホバーエフェクトで学ぶ動きのある表現の基本
・Webページの重要要素である「ボタン」に効果的なエフェクトを適用する方法
・複数の要素に、個別に同一のコードを適用する方法
・animate()メソッドの一歩踏み込んだ活用方法
例
$(function() {
let duration = 300
$('button1')
.on('mouseover', function() {
$(this).stop(true).animate({
color: '#f00';
), duration);
})
.on('mouseout', function() {
$(this).stop(true).animate({
color: '#000';
), duration);
});
$('button2')
.on('mouseenter', function() {
$(this).find('> span').stop(true).animate({
width: 100%;
color: '#f00';
), duration, 'easeOutQuad');
})
.on('mouseleave', function() {
$(this).find('> span').stop(true).animate({
width: 0%;
), duration, 'easeOutQuad');
});
});
※変数durationを宣言して300を格納することで、
アニメーション速度を一括変更できる
※thisを使用することで、マウス操作が起こったボタンに対してだけ、
個別にアニメーションエフェクトが発火する
（thisを使わないとボタン全部に対して一律に効いてしまう）
※CSSでoverflow: hidden;を設定しておく
※2つ目のボタンはfind()メソッドを使用して要素を絞り込んでいる
（.on()メソッドと.animate()メソッドの処理対象を変更することで、
複数の効果を同時に実現する）
find()メソッドとは
jQueryオブジェクトに含まれる各要素の子孫要素の中から、
セレクタを使用して要素を絞り込むメソッド
※メソッドチェーン内でfind()メソッドを使用すると、
find()メソッドの前後で処理対象となる要素が変わる
※$()関数とfind()メソッドの違い
・$()関数はHTML全体に対してセレクタで要素を絞り込む
・find()メソッドはjQueryオブジェクトの子孫要素を対象として
セレクタで要素を絞り込む
②画像とキャプションの表現
例
$(function() {
let duration = 300;
let images = $('#images p');
$(images).filter(':nth-child(1)')
.on('mouseover', function() {
$(this).find('strong span').stop(true).animate({
opacity: 1;
), duration);
})
.on('mouseout', function() {
$(this).find('strong span').stop(true).animate({
opacity: 0;
), duration);
});
});
※filter()メソッドを使用して要素を絞り込んでいる
filter()メソッドとは
jQueryオブジェクトに含まれる各要素の中から、
セレクタを使用して更に要素を絞り込むメソッド
※アニメーションさせたい要素をあらかじめ
変数に個別に格納して指定しても同様の効果が得られる
例
let $effect1 = $('images p:nth-child(1)');
let $effect2 = $('images p').filter$(':nth-child(1)');
filter()メソッドとfind()メソッドの違い
※どちらもjQueryオブジェクトを対象に要素を絞り込むメソッド
・find()メソッドはjQueryオブジェクトの各要素の子孫要素が対象
・filterメソッドはjQueryオブジェクトの各要素が対象
③丸いボタンのレイアウト
例
$(function() {
let duration = 300;
$( '#button' ).each(function(index){
let item = index * 40 -40;
})
.on('mouseover', function() {
let btn = $(this).stop(true).animate({
color: '#f00';
), duration);
})
.on('mouseout', function() {
let btn = $(this).stop(true).animate({
color: '#000';
), duration);
});
});
※each()メソッドを使って各ボタンを斜めに配置している
each()メソッドとは
jQueryオブジェクトに含まれる各要素に対して個別に処理を実行するメソッド
構文 each()メソッド
each(function(index){
要素ごとの処理
});
※each()メソッドは引数に指定されている関数を要素ごとに実行する
※関数の引数には現在処理されている要素の番号
（全要素の内の何番目の要素か）が渡される
※配列と同様に「1」からではなく「0」からはじまる
④見え隠れするサイドバー
例
$(function() {
let duration = 300;
let $aside = $('aside');
let $asideButton = $aside.find(button);
.on('click', function() {
$aside.toggleClass('open');
if($aside.hasClass('open')){
$aside.stop(true).animate({
left: '-70px'
}, duration, 'easeOutBack');
$asideButton.find('img')
.attr('src', 'img/closebtn.png');
}else{
$aside.stop(true).animate({
left: '-350px'
}, duration, 'easeInBack');
$asideButton.find('img')
.attr('src', 'img/openbtn.png');
};
});
});
※toggleClass()メソッドでクラスの付け外しをすることでサイドバーの位置を切り替える
toggleClass()メソッドとは
引数に渡されたクラス名（文字列）がjQueryオブジェクト内の
要素のクラス属性に指定されているかを確認し、
指定されていない場合は追加し、
指定されている場合は削除するメソッド
※処理は繰り返し実行される
※hasClass()メソッドで条件分岐を行う
hasClass()メソッドとは
引数に渡したクラス名（文字列）が、対象要素のクラス属性に
含まれていればtrue、含まれていなければfalseを返すメソッド
※img要素に対してattr()メソッドを実行する
attr()メソッドとは
要素の属性値の取得、または属性値の設定を行うメソッド
構文 attr()メソッド
attr(属性名);
構文 attr()メソッド：属性値の設定（jQueryオブジェクト返る）
attr(属性名, 値);
addClass()メソッド、removeClass()メソッド
addClass()メソッドは引数の文字列（クラス名）をclass属性に追加するメソッド、removeClass()は反対に削除するメソッド
※引数の指定は複数でも可
⑤タイポグラフィの表現
※オリジナルのプラグイン.typoShadow()を予め作成しているので、
それを読み込むことで、実質的に1行の記述で実装できる
プラグインの使い方
・プラグインのダウンロードと読み込み
・プラグインの実行