3月17日 授業内容①(jQuery バブリング、one,slideUp,slideDown,show,hide,toggle,:not(:animated),fadeIn,fadeOut,fadeTo(コールバック関数),animate,swing)etc...
※jQueryのバブリング
functionで要素セレクターとしてPやaを指定すると、他の場所にある同じ種類のセレクターーにも機能してしまうこと。
idやclassで限定して指定するとバブリングが解決できる。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryのバブリング防止、one()</title> <style> ul,li{list-style:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script> $(document).ready(function(){ $('#nav a').on('click',function(){//今ulの上にaリンクがあるのでそちらにclickがファンクションしないように、ul aとしてセレクターを制限する。 $('#mainImg img').attr('src',$(this).attr('href')).attr('alt',$(this).text()); return false//指定している属性以外はとらないようにする設定 });//aの閉め $('#flower>img').one('click',function(){//クリックしても1回だけhしかきかない $('#mainImg img').attr('src',$(this).attr('src')).attr('alt',$(this).attr('alt')) });//li imgの閉め }); </script> </head> <body> <p><a href="https://www.google.co.jp/">リンクしているページに移動</a></p> <ul id="nav"> <li id="flower"><img src="img/flower.jpg" alt="花" width="100"></li> <li><a href="img/sea.jpg" >海</a></li> <li><a href="img/jellyfish.jpg" >くらげ</a></li> <li><a href="img/building.jpg" >建物</a></li> </ul> <p id="mainImg"><img src="img/flower.jpg" alt="花"></p> </body> </html>
HTML/CSSを操作する
d.hatena.ne.jp
※イベント
http://d.hatena.ne.jp/web-0818/20160606/p1
・toggle
⇩
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる</title> <style> ul,li{list-style:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(document).ready(function(){ }); </script> </head> <body> <div id="container"> <p id="imgChange"><img src="img/toggle01.png" alt="01"></p> </div> <script> $(function(){ $('#imgChange').toggle(//今はonイベントが主流なので最新のjQueryにはtoggleがないので使うときはjquery-migrate-1.2.1.min.jsをスクリプトに書くこと。toggleの機能はカウンター変数と同じでvar i=1,i++を条件をつけてまわしているようなもの function(){$('img').attr('src','img/toggle02.png');}, function(){$('img').attr('src','img/toggle03.png');}, function(){$('img').attr('src','img/toggle04.png');}, function(){$('img').attr('src','img/toggle01.png');} ); }); </script> </body> </html>
※アニメーション効果
d.hatena.ne.jp
コールバック関数P127(コールバック関数とは,アニメーション処理が完了した後に続けて実行される命令のこと)
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる</title> <style> div#up{width:300px; height:300px; background-color:skyblue; display:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(document).ready(function(){ $('#hyouji button').on('click',function(){ $('#up').show('slow',function(){ $(this).css('background-color','olive');//コールバック関数P127(コールバック関数とは,アニメーション処理が完了した後に続けて実行される命令のこと) }); }); $('#kakusu button').on('click',function(){ $('#up').hide('fast'); }); }); </script> </head> <body> <p id="hyouji"><button>表示</button></p> <p id="kakusu"><button>隠す</button></p> <div id="up"></div> </body> </html>
not:animated・・・画像を連続でクリックしてもshowの動きが最後まで終わるまで機能しないようにする。これを設定しておかないとボタンを連打した回数だけ画像が表示、非表示を繰り返すことになる。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる(not:animated・・・画像を連続でクリックしてもshowの動きが最後まで終わるまで機能しないようにする)</title> <style> div#up{width:300px; height:300px; background-color:skyblue; display:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script> $(document).ready(function(){ $('#aaa button').click(function(){ $('#up:not(:animated)').toggle('slow')//showとhideを合体させたような機能がtoggle }); }); </script> </head> <body> <p id="aaa"><button>表示・隠す</button></p> <div id="up"></div> </body> </html> </html>
⇩
⇩
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる(開閉パネル)</title> <style> dl { width: 300px; margin: 50px auto; } dt{ background: #7CADB6; padding: 10px; cursor: pointer; } dd{ border: 1px solid #7CADB6; height: 250px; margin: 0; } </style> <script src="../jquery-1.12.1.min.js"></script> <script> $(function(){ $( 'dt' ).on('click',function(){ if($( 'dd' ).css( 'display' ) == 'block' ){//display==blockの時はddの表示がされている状態 $( 'dd:not(:animated)').slideUp( 'slow' ); }else{ $( 'dd' ).slideDown( 'slow' ); } }); });</script> </head> <body> <dl> <dt>スライドして表示状態を切り替える</dt> <dd> slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。 </dd> </dl> </body> </html>
クリックする度に画像が換わる(開閉パネル)(slide toggle)
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる(開閉パネル)(slide toggle)</title> <style> dl { width: 300px; margin: 50px auto; } dt{ background: #7CADB6; padding: 10px; cursor: pointer; } dd{ border: 1px solid #7CADB6; height: 250px; margin: 0; } </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $( 'dt' ).on('click',function(){ $( 'dd:not(:animated)').slideToggle( 'slow' ); }); });</script> </head> <body> <dl> <dt>スライドして表示状態を切り替える</dt> <dd> slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。 </dd> </dl> </body> </html>
表示状態をフェードイン・フェードアウトで切り換える
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>表示状態をフェードイン・フェードアウトで切り換える</title> <style> img{display:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $('#fadein').on('click',function(){ $('img').fadeIn('200');//slow=600,標準=400 }); $('#fadeout').on('click',function(){ $('img').fadeOut('700'); }); }); </script> </head> <body> <p><button id="fadein">fadeIn</button></p> <p><button id="fadeout">fadeOut</button></p> <p><img src="img/flower.jpg" alt="花"></p> </body> </html>
表示状態をフェードイン・フェードアウトで切り換える(toggle)
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>表示状態をフェードイン・フェードアウトで切り換える(toggle)</title> <style> img{display:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $('#fadeinout').on('click',function(){ $('img:not(:animated)').fadeToggle('slow'); }); }); </script> </head> <body> <p><button id="fadeinout">fadeIn/fadeOut</button></p> <p><img src="img/flower.jpg" alt="花"></p> </body> </html>
透明度を徐々に変更する
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>透明度を徐々に変更する</title> <style> img{display:none;} </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $('#fade100').on('click',function(){ $('img:not(:animated)').fadeTo('slow',1); }); $('#fade50').on('click',function(){ $('img:not(:animated)').fadeTo('slow',0.5); }); $('#fade0').on('click',function(){ $('img:not(:animated)').fadeTo('slow',0); }); }); </script> </head> <body> <button id="fade0">fade0</button> <button id="fade50">fade50</button> <button id="fade100">fade100</button> <p id="fadeup"><img src="img/flower.jpg" alt="花"></p> </body> </html>
独自のアニメーションを設定できる(横方向にスライド)
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <!--http://d.hatena.ne.jp/web-0818/20160607/p1 --><title>独自のアニメーションを設定できる(横方向にスライド)</title> <style> p { width:800px; height:267px; margin:0; } div { width:400px; height:267px; overflow:hidden; } </style> <script src="../jquery-1.12.1.min.js"></script> <script src="../jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $( '#flower' ).on('click',function(){ $( 'p:not(:animated)' ).animate({ marginLeft : '-400px' },'400', 'swing' );//slow=600,標準=400 }); $( '#building' ).on('click',function(){ $( 'p:not(:animated)' ).animate({ marginLeft : '0' }, 'slow', 'swing'); }); }); </script> </head> <body> <div> <p><img src="img/flower.jpg" alt="flower" id="flower"><img src="img/building.jpg" alt="building" id="building"></p> </div> </body> </html>