前提・実現したいこと
$.when
の非同期処理を1つの関数にしたいです。
右からスライドして現れて、左にスライドしながら消えていくスライダーを作りました。
$.when
の非同期処理を1つの関数にすると.done
の一部である、
$('.current').css({'left': width});
だけが実行されません。
1つの関数にするにはどのようにすればよいのでしょうか
ご教授お願いします。
関数化する前のソースコード
html
1<div class="container"> 2 <ul class="slide_wrap"> 3 <li class="current"><div style="background:#aff;">スライド1</div></li> 4 <li class="nextSlide"><div style="background:#f00;">スライド2</div></li> 5 <li><div style="background:#faf;">スライド3</div></li> 6 </ul> 7</div>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6li { 7 list-style: none; 8} 9 10.container { 11 width: 960px; 12 height: 400px; 13 margin: 50px auto 0; 14} 15 16 17.slide_wrap { 18 width: 500px; 19 height: 400px; 20 margin: 0 auto; 21 position: relative; 22 overflow: hidden; 23} 24 25.slide_wrap li { 26 position: absolute; 27 top: 0; 28 left: 100%; 29} 30 31.slide_wrap li.current { 32 left: 0; 33} 34 35.slide_wrap div { 36 width: 740px; 37 height: 400px; 38}
jquery
1$(function() { 2 function slidestart() { 3 var slideItem = $('.slide_wrap li'); // スライドさせる全ての画像の取得 4 var width = slideItem.width(); // 740: スライドさせる画像の幅 5 var nextNum = 1; // 次にスライドする要素のindex番号 6 var slideSet; // setIntervalのID 7 8 // done時の処理 9 function next() { 10 if(nextNum == slideItem.length - 1) { 11 nextNum = 0; 12 } else { 13 nextNum++; 14 } 15 $('.current').css({'left': width}); // 終ったスライド要素を初期位置に戻す 16 $('.current').removeClass('current'); 17 $('.nextSlide').addClass('current'); 18 $('.nextSlide').removeClass('nextSlide'); 19 slideItem.eq(nextNum).addClass('nextSlide'); // 次の要素をスタンバイ 20 } 21 22 function slide() { 23 // 非同期処理 24 $.when( // 先の順番の処理 25 $('.nextSlide').animate({left: 0},1500), // // 次をスライドイン 26 $('.current').animate({left: - width},1500) // スライドアウト 27 ).done(function() { // whenが終わったら実行 28 next(); 29 }); 30 } 31 32 slideSet = setInterval(function() { 33 slide(); 34 },4000); 35 36 setTimeout(function() { 37 clearInterval(slideSet); 38 },60000); 39 40 } // slidestart 41 42 slidestart(); 43});
試したこと
1.普通に関数化
結果・・・.doneの処理が一部されない
jquery
1 function current() { 2 $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 3 $('.current').animate({left: - width},1500); // スライドアウト 4 } 5 6 function slide() { 7 // 非同期処理 8 $.when( // 先の順番の処理 9 current() 10 ).done(function() { // whenが終わったら実行 11 next(); 12 }); 13 }
2.DeferredとPromise
結果・・・動かない
jquery
1 var current = function () { 2 var d = $.Deferred(); 3 $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 4 $('.current').animate({left: - width},1500); // スライドアウト 5 return d.promise(); 6 }; 7 8 function slide() { 9 // 非同期処理 10 $.when( // 先の順番の処理 11 current() 12 ).done(function() { // whenが終わったら実行 13 next(); 14 }); 15 }
3.非同期処理を別々の関数にしてreturnする
結果・・・動くのだが、そもそも1つの関数にしたいから他の方法を探す
jquery
1 function first() { 2 return $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 3 }; 4 5 function second() { 6 return $('.current').animate({left: - width},1500); // スライドアウト 7 }; 8 9 function slide() { 10 // 非同期処理 11 $.when( // 先の順番の処理 12 first(), 13 second() 14 ).done(function() { // whenが終わったら実行 15 setTimeout(function() { 16 next(); 17 },1000); 18 }); 19 } // slide
4.1つの関数にして配列にしてreturnする
5..done
を遅延してみる
結果・・・.doneの処理が一部されない
jquery
1 function current() { 2 var obj = new Object(); 3 obj.val1 = $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 4 obj.val2 = $('.current').animate({left: - width},1500); // スライドアウト 5 return obj; 6 }; 7 8 function slide() { 9 // 非同期処理 10 $.when( // 先の順番の処理 11 current() 12 ).done(function() { // whenが終わったら実行 13 setTimeout(function() { 14 next(); 15 },1000); 16 }); 17 } // slide
補足情報(FW/ツールのバージョンなど)
PC:win10
ブラウザ:chrome
jquery:1.12.4
jqueryCDN
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/09 11:00
2018/11/09 11:03
2018/11/09 11:29