チェックしたら上から「チェックしました」とスライド表示して、5秒後に上にスライドで戻したいです。
大体はできているものの、チェックを連続したときにうまくいきません。
2秒で戻ったり、1秒で戻ったり、一貫性がないように見えます。(以前のアニメーション(setTimeout
)が残っている?)
調べてみたところ、setTimeout
のリセットにはclearTimeout
を使えばいいようですが、今回のソードに合うような使い方がわかりません。
どのようにしたら、連続チェックしてもきちんと5秒の動作になるでしょうか?
html
1<main id="main"> 2<input type="checkbox"> 3<input type="checkbox"> 4</main>
jQuery
1function info(action,state){ 2 $('#info').remove(); 3 // 表示 4 if( action=='clip' ){ 5 var mes = state=='on' ? 'チェックしました。' : '解除しました。' ; 6 $('#main').prepend('<div id="info" class="animated slideInDown"><p>'+mes+'</p></div>'); 7 var time1 = 5000; 8 var time2 = 5200; 9 } 10 // アニメーション 11 info1 = setTimeout(function(){ 12 $('#info').addClass('slideOutUp').removeClass('slideInDown'); 13 },time1); 14 info2 = setTimeout(function(){ 15 $('#info').remove(); 16 },time2); 17} 18 19$(document).on("change","input", function(){ 20 if( $(this).prop('checked') == true ){ 21 info('clip','on'); 22 }else{ 23 info('clip','off'); 24 } 25});
css
1#main { 2 background:bisque; 3} 4#main input { 5 margin: 50px 0 0 0; 6} 7#info { 8 position:fixed; 9 top:0; 10 right:0; 11 left:0; 12 background: red; 13} 14p { 15 margin:0; 16} 17 18/* アニメーション */ 19.animated { 20 -webkit-animation-duration: 0.2s; 21 animation-duration: 0.2s; 22 -webkit-animation-fill-mode: both; 23 animation-fill-mode: both; 24} 25 26/* スライドアップ */ 27@keyframes slideOutUp { 28 from { 29 -webkit-transform: translate3d(0, 0, 0); 30 transform: translate3d(0, 0, 0); 31 } 32 33 to { 34 visibility: hidden; 35 -webkit-transform: translate3d(0, -100%, 0); 36 transform: translate3d(0, -100%, 0); 37 } 38} 39.slideOutUp { 40 -webkit-animation-name: slideOutUp; 41 animation-name: slideOutUp; 42} 43 44/* スライドダウン */ 45@keyframes slideInDown { 46 from { 47 -webkit-transform: translate3d(0, -100%, 0); 48 transform: translate3d(0, -100%, 0); 49 visibility: visible; 50 } 51 52 to { 53 -webkit-transform: translate3d(0, 0, 0); 54 transform: translate3d(0, 0, 0); 55 } 56} 57.slideInDown { 58 -webkit-animation-name: slideInDown; 59 animation-name: slideInDown; 60} 61 62 63
あまり大掛かりにコードは変えずに、上のjQueryにclearTimeout
を適用させるような書き方が知れれば幸いです。
JSfiddleにサンプルを置きました。よろしければお試しいただければと思います。
https://jsfiddle.net/Lewvo30u/
回答1件
あなたの回答
tips
プレビュー