http://tutsplus.com/lesson/modifying-effect-speeds/
jQuery.extend( jQuery.fx, { tick: function() { ・・・ speeds: { slow: 600, fast: 200, // Default speed _default: 400 }, step: { opacity: function( fx ) { jQuery.style( fx.elem, "opacity", fx.now ); }, _default: function( fx ) { ・・・ });
$.fx.speeds.slow = 2000;とかしてデフォルト値を変更したり
$.fx.speeds.tortoise = 5000;とかして新しいパラメータを作ったりできる。
http://tutsplus.com/lesson/creating-custom-effect-methods/
[source] [reload] |
// Generate shortcuts for custom animations jQuery.each({ slideDown: genFx( "show", 1 ), slideUp: genFx( "hide", 1 ), slideToggle: genFx( "toggle", 1 ), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { return this.animate( props, speed, easing, callback ); }; });
$(document).ready(function(){ // ---------------------------- // 新しい Effect !! // ---------------------------- // 1) 500ms かけて slideDown // 2) 300ms 何もしない // 3) 2000ms かけて slideUp // ---------------------------- $.fn.flash = function( speed, easing, callback ) { var $this = $(this); return $this.slideDown(500, function() { $this.delay(300).slideUp(2000); }); }; formWindow.init($('#orderForm') , { effect : 'flash', speed : 1000 }); }); var formWindow = { container : null, config: { effect: 'slideToggle', speed: 500 }, init : function(container, config) { this.container = container; if (config) { $.extend(this.config, config); } // ×ボタン $('<span> X </span>') .prependTo(container) .on('click', this.close) .addClass('btnClose'); // Form表示ボタン $('<button></button>', { text: 'ORDER HERE!' }) .insertAfter(container.before()) .on('click', this.show); }, show : function() { var obj = formWindow.container; var fnc = formWindow.config.effect; var arg = formWindow.config.speed; // javascript の reflection obj[fnc](arg); }, close : function() { var obj = formWindow.container; var fnc = formWindow.config.effect; var arg = formWindow.config.speed; // javascript の reflection obj[fnc](arg); } }
http://tutsplus.com/lesson/full-control-with-animate/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson13</title> <style type="text/css"> /* ==================== STYLES ==================== */ .box { top: 30px; left: 0px; width: 200px; position: absolute; background: lightgray; } /* ==================== STYLES ==================== */ </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ $(document).ready(function(){ var box = $('div.box'); box.on('mouseover', function(){ box .animate({ top: "+=50", left: "+=50", width : "-=50", height : "-=50", }, 500) .animate({ width : "+=50", height : "+=50", queue : false }, 500); }); box.on('mouseout', function(){ box .animate({ top: 30, left: 0, }, 1000, 'swing'); }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> ↓ Point Here ! <div class="box"> 【箱】物を入れるための器。木、紙、皮革、金属、 プラスチックなどで作り、身とふたとに分かれる。 [英] a box; a case </div> </body> </html>
prop | アニメーションのゴールとなる CSS を連想配列(JSON)で指定 |
speed | アニメーションのスピード (現在位置からゴールまでの所要 ms) |
easing | アニメーション。jQeury には 'liner' と 'swing' が用意されている。省略時 'liner' |
callback | アニメーション終了後の処理 |
duration | 第二引数(spped) の代わり、'slow'、'nomal'、'fast'、ミリ秒 を指定できる |
easing | 第三引数(easing) の代わり |
complete | 第四引数(callback) の代わり |
step | アニメーションのフレーム描画毎に呼ばれる function(n)。n はアニメーションの進行状況(n=(0→1) もしくは n=(1→0)) |
queue | true : 前の animate が終わるまで待つ(デフォルト値)。false : 同時実行 |
width: "+=10"eq.
width: parseInt(box.css(width)) + 10
box.css('color','red').css('width','200px');eq.
bos.css({ color : 'red', width : '200px' });
http://tutsplus.com/lesson/jquery-animate-homework-solutions/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson14</title> <style type="text/css"> /* ==================== STYLES ==================== */ .box { top: 30px; left: 0px; width: 200px; position: absolute; background: lightgray; } /* ==================== STYLES ==================== */ </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ $(document).ready(function(){ var box = $('div.box'); $.fn.looperMove = function(speed, fn) { return $(this) .animate({ top: "+=50", left: "+=50", width : "-=50", height : "-=50", opacity : "toggle" }, speed || 500) .animate({ width : "+=50", height : "+=50", opacity : "toggle" }, speed || 500, function(){ $.isFunction(fn) && fn.call(this) }); } box.on('mouseover', function(){ box.looperMove(1000, function(){ // console.log('looperMove ended') }); }); box.on('mouseout', function(){ box .animate({ top: 30, left: 0, }, 1000, 'swing'); }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> ↓ Point Here ! <div class="box"> 【箱】物を入れるための器。木、紙、皮革、金属、 プラスチックなどで作り、身とふたとに分かれる。 [英] a box; a case </div> </body> </html>
$.fn.looperMove = function(speed, fn) { ... }
speed || 500これは、speed が undefined なら 500、そうでなければ speed を返す書き方。
-- (f() || g()) の評価手順 -- ・f() を評価して F を得る ・F は 値 → (f() || g()) の値は F (g() がなんであろうと、全体の評価結果は F になるので、g() は評価しない) ・F は undefined → (f() || g()) の値は g() の評価結果 G
$.isFunction(fn) && fn.call(this)これは、fn が undefined でないとき fn を呼び出す書き方。この書きかは他の C 系の言語と比べても違和感ない。
-- (f() && g()) の評価手順 -- ・f() を評価して F を得る ・F は false → (f() && g()) の値は false (g() がなんであろうと、全体の評価結果は false になるので、g() は評価しない) ・F は true → (f() && g()) の値は g() の評価結果 G
.animate({ ... }, speed || 500, function(){ $.isFunction(fn) && fn.call(this) });
.animate({ ... }, speed || 500, function(){ $.isFunction(fn) && fn(this) });
.animate({ width : "+=50", height : "+=50", opacity : "toggle" }, speed || 500, fn});
http://tutsplus.com/lesson/the-obligatory-slider/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson15</title> <style type="text/css"> /* ==================== STYLES ==================== */ * { margin: 0; padding: 0; } .slider { width: inherit; height: 230px; overflow: scroll; } .slider ul { /* Javascript 無効時には、横に並べて表示する。 $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする */ width: 10000px; list-style: none; } .slider li { float: left; /* 左に回り込み指定 */ } #slider-nav { /* 表示無効 Javascript 無効時には、ボタンを表示しない。 $(document).ready() で block (表示) に変更する */ display: none; margin-left: 1em; } #slider-nav button { padding: 1em; margin-right: 1em; border-radius: 10px; cursor: pointer; } /* ==================== STYLES ==================== */ </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ $(document).ready(function(){ // $(document).ready() 時点の image // // 読み込み onloadイベント // -------------------------------------- // IE 済 (width > 0) 発生しない // Firefox 途中 (width > 0) 発生する // Safari 未 (width = 0) 発生する // Chrome 未 (width = 0) 発生する // $(window).on('load', initialize); }); function initialize() { var sliderArea = $('div.slider'); var ul = sliderArea.children('ul'); var li = ul.find('li'); var img = ul.find('img'); var width = img[0].width; var totalWidth = width * img.length; sliderArea.css({ 'width' : width, 'overflow' : 'hidden' }); // 右に水星、左に冥王星をもう一つ追加 // 右端の水星にスライド終了後、アニメーションなしで左の水星に移動 // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動 ul.append($.clone(li[0])); ul.prepend($.clone(li[li.length - 1])); ul.css({ "margin-left" : -1 * width }) var buttonArea = $('#slider-nav'); var buttons = buttonArea.children('button'); buttonArea.show(); buttons.on('click', function(){ var $this = $(this); var direction = $this.data('dir'); if (direction == 'next') { ul.animate({ "margin-left" : "-=" + width }, function(){ // 右端の水星(Javascript で足したもの)に来たら、左端へ if ( -1 * totalWidth > parseInt(ul.css('margin-left'))) { ul.css('margin-left', -1 * width); } }); } else { ul.animate({ "margin-left" : "+=" + width }, function(){ // 左端の冥王星(Javascript で足したもの)に来たら、右端へ if (0 == parseInt(ul.css('margin-left'))) { ul.css('margin-left', -1 * totalWidth); } }); } }); } /* ==================== SCRIPTS ==================== */ </script> </head> <body> <div class="slider"> <ul> <li><img src="mercury.png" alt="mercury"/></li> <li><img src="venus.png" alt="venus"/></li> <li><img src="earth.png" alt="earth"/></li> <li><img src="mars.png" alt="mars"/></li> <li><img src="jupiter.png" alt="jupiter"/></li> <li><img src="saturn.png" alt="saturn"/></li> <li><img src="uranus.png" alt="uranus"/></li> <li><img src="neptune.png" alt="neptune"/></li> <li><img src="pluto.png" alt="pluto"/></li> </ul> </div> <div id="slider-nav"> <button data-dir="prev">Previous</button> <button data-dir="next">Next</button> </div> </body> </html>
http://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson16</title> <style type="text/css"> /* ==================== STYLES ==================== */ * { margin: 0; padding: 0; } .slider { width: inherit; height: 230px; overflow: scroll; } .slider ul { /* Javascript 無効時には、横に並べて表示する。 $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする */ width: 10000px; list-style: none; } .slider li { float: left; /* 左に回り込み指定 */ } #slider-nav { /* 表示無効 Javascript 無効時には、ボタンを表示しない。 $(document).ready() で block (表示) に変更する */ display: none; margin-left: 1em; } #slider-nav button { padding: 1em; margin-right: 1em; border-radius: 10px; cursor: pointer; } /* ==================== STYLES ==================== */ </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ /* ▽▽▽ここからプロジェクトのライブラリ (mylib.js などにする)▽▽▽ */ function Slider(container) { this.container = container; $(window).on('load', $.proxy(this.initialize, this)); } Slider.prototype.initialize = function() { var ul = this.container.children('ul'); var li = ul.find('li'); var img = ul.find('img'); var width = img[0].width; var totalWidth = width * img.length; this.container.css({ 'width' : width, 'overflow' : 'hidden' }); // 右に火星、左に冥王星をもう一つ追加 // 右端の火星にスライド終了後、アニメーションなしで左の火星に移動 // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動 ul.append($.clone(li[0])); ul.prepend($.clone(li[li.length - 1])); ul.css({ "margin-left" : -1 * width }) this.ul = ul; this.width = width; this.totalWidth = totalWidth; } Slider.prototype.next = function() { this.ul.animate({ "margin-left" : "-=" + this.width }, $.proxy(function(){ // 右端の火星(Javascript で足したもの)に来たら、左端へ if ( -1 * this.totalWidth > parseInt(this.ul.css('margin-left'))) { this.ul.css('margin-left', -1 * this.width); } }, this)); } Slider.prototype.prev = function() { this.ul.animate({ "margin-left" : "+=" + this.width }, $.proxy(function(){ // 左端の冥王星(Javascript で足したもの)に来たら、右端へ if (0 == parseInt(this.ul.css('margin-left'))) { this.ul.css('margin-left', -1 * this.totalWidth); } }, this)); } /* △△△ここまでプロジェクトのライブラリ (mylib.js などにする)△△△ */ $(document).ready(function(){ var slider = new Slider($('div.slider')); var buttonArea = $('#slider-nav'); var buttons = buttonArea.children('button'); buttonArea.show(); buttons.on('click', function(){ var $this = $(this); var direction = $this.data('dir'); if (direction == 'next') { slider.next(); } else { slider.prev(); } }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> <div class="slider"> <ul> <li><img src="mercury.png" alt="mercury"/></li> <li><img src="venus.png" alt="venus"/></li> <li><img src="earth.png" alt="earth"/></li> <li><img src="mars.png" alt="mars"/></li> <li><img src="jupiter.png" alt="jupiter"/></li> <li><img src="saturn.png" alt="saturn"/></li> <li><img src="uranus.png" alt="uranus"/></li> <li><img src="neptune.png" alt="neptune"/></li> <li><img src="pluto.png" alt="pluto"/></li> </ul> </div> <div id="slider-nav"> <button data-dir="prev">Previous</button> <button data-dir="next">Next</button> </div> </body> </html>
http://tutsplus.com/lesson/your-questions-answered/
http://tutsplus.com/lesson/jquery-30-days-quiz-2/
http://tutsplus.com/lesson/each-and-templating/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson19</title> <style type="text/css"> /* ==================== STYLES ==================== */ ul { margin: 0; padding: 0; list-style: none; } div { float: left; border: solid 1px; border-color: darkred; margin: 1px; } /* ==================== STYLES ==================== */ </style> <script id="planetTemplate" type="text/template"> <!-- ==================== TEMPLATE ==================== --> <div> <img src="%%planet%%.png" alt="%%planet%%"/> <ul> <li>直径 : %%diameter%% km</li> <li>公転距離 : %%dist%% AU</li> <li>自転周期 : %%rotation%%</li> <li>公転周期 : %%revolution%%</li> <li>光度 : %%luminous%% 等星</li> </ul> </div> <!-- ==================== TEMPLATE ==================== --> </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ var planets = [ { planet : 'mercury', diameter : '4878', dist : '0.387', rotation : '58.65日', revolution : '87.97日', luminous : '-2.4' },{ planet : 'venus', diameter : '12104', dist : '0.723', rotation : '243.0日', revolution : '224.7日', luminous : '-4.7' },{ planet : 'earth', diameter : '12756', dist : '1.00', rotation : '23.93時間', revolution : '365.26日', luminous : '' },{ planet : 'mars', diameter : '6787', dist : '1.524', rotation : '1.026日', revolution : '686.98日', luminous : '-3.0' },{ planet : 'jupiter', diameter : '142800', dist : '5.203', rotation : '9.8時間', revolution : '11.86年', luminous : '-2.8' },{ planet : 'saturn', diameter : '120660', dist : '9.539', rotation : '10.2時間', revolution : '29.46年', luminous : '-0.5' },{ planet : 'uranus', diameter : '51118', dist : '19.18', rotation : '17.9時間', revolution : '84年', luminous : '5.3' },{ planet : 'neptune', diameter : '49528', dist : '30.06', rotation : '19.1時間', revolution : '164.8年', luminous : '7.8' },{ planet : 'pluto', diameter : '2320', dist : '39.53', rotation : '6.4日', revolution : '248.5年', luminous : '13.6' } ]; $(document).ready(function(){ var template = $.trim($('#planetTemplate').html()); var flagment = ''; $.each( planets, function( index, obj ){ flagment += template .replace(/%%planet%%/ig, obj.planet) .replace(/%%diameter%%/ig, obj.diameter) .replace(/%%dist%%/ig, obj.dist) .replace(/%%rotation%%/ig, obj.rotation) .replace(/%%revolution%%/ig, obj.revolution) .replace(/%%luminous%%/ig, obj.luminous); }); $('body').append(flagment); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> </body> </html>
http://tutsplus.com/lesson/say-hello-to-handlebars/
← Day 10 以前 : Javascript Learn jQuery in 30 Days (01-10)
→ Day 21 以降 : Javascript Learn jQuery in 30 Days (21-30)