jQueryの - CSSアニメーション

Question

とフェードインフェードアウトエラーは私がWebページが、その後フェードアウトし、別のdivで置き換えられている、開いたときのローディングアニメーションを実行したいです。私はjQueryのを使用していますが、アニメーションが何らかの理由でfadeinとfadeoutに干渉していると私はそれを把握することができないように思えます。

jQueryのは、この場合には動作します：

http://jsfiddle.net/jgTh2/12/

しかし、同じコードは、CSSアニメーションでは動作しません：

https://jsfiddle.net/xkuyL7uy/

アニメーションはこちらから：

http://tobiasahlin.com/spinkit/

すべてのヘルプは大歓迎します！ （あなたはjQueryのを含めたら）あなたはそれがセットアップされている

Answer 1

の方法は、高さを必要とフェードアウトは要素が画面に進みます：何の高さを持っていませんなし。この問題はdisplay：none要素のnext（）関数を呼び出して使用しようとするために発生します。あなたがコントロールしたい場合だけではなく、.nextのタイムアウトを使用します（）。遅延（1000）

https://jsfiddle.net/xkuyL7uy/4/

$('#id').hide(); 

var spin = $(".spinner"); 

spin.fadeOut(); 

setTimeout(function() 
{ 
    spin.fadeIn(); 
}, 2000); 

は、フェードの長さは、この

https://jsfiddle.net/xkuyL7uy/3/

var spin = $(".spinner"); 

fadeTo(spin, 0); 

setTimeout(function() 
{ 
    fadeTo(spin, 1); 
}, 1000); 

function fadeTo(selector, num) { 
    selector.fadeTo(1000, num); 
} 

使用します

フェードを維持するには、このような間隔を使用します。

https://jsfiddle.net/xkuyL7uy/5/

$('#id').hide(); 

var spin = $(".spinner"); 

fadeTo(spin, 0); 

setInterval(function() { 
    fadeTo(spin, 1); 
    setTimeout(function() 
    { 
     fadeTo(spin, 0); 
    }, 1000); 
}, 1000); 

function fadeTo(selector, num) { 
    selector.fadeTo(1000, num); 
} 

Answer 2

（1） - 私はこのラインが何であるかを知らない：

$('#id').hide();

（2） - このhttps://jsfiddle.net/xkuyL7uy/からこのhttp://jsfiddle.net/jgTh2/12/にコードをコピーした場合、それはなります仕事、あなたはjqueryや何かにリンクしていないと思います。

（3） - あなたはそれが働いているやりたいためにこの方法を試してみてください。

$(".spinner").fadeOut(); 
setTimeout(function() { 
        $(".spinner").fadeIn(); 
       }, 1000); 

私はこれが便利だった願っています。 http://jsfiddle.net/jgTh2/14/

Answer 3

bodyタグの末尾にjQueryリンクが含まれていないことがわかりました（固定：click me）。 click me：あなたはこれをチェックすることができますかわからない場合

HTML: 
    <div id="box"><h1>HELLO</h1></div> 

    <div class="spinner"> 
     <div class="dot1"></div> 
     <div class="dot2"></div> 
    </div> 

    <!-- This is what I meant --> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 


    CSS: 
    .spinner { 
     margin: 100px auto; 
     width: 40px; 
     height: 40px; 
     position: relative; 
     text-align: center; 

     -webkit-animation: sk-rotate 2.0s infinite linear; 
     animation: sk-rotate 2.0s infinite linear; 
    } 

    .dot1, .dot2 { 
     width: 60%; 
     height: 60%; 
     display: inline-block; 
     position: absolute; 
     top: 0; 
     background-color: #333; 
     border-radius: 100%; 

     -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 
     animation: sk-bounce 2.0s infinite ease-in-out; 
    } 

    .dot2 { 
     top: auto; 
     bottom: 0; 
     -webkit-animation-delay: -1.0s; 
     animation-delay: -1.0s; 
    } 

    jQuery: 
    $('#id').hide(); 
    $(".spinner").fadeOut().next().delay(1000).fadeIn(); 

。しかし、あなたがやろうとしていたものだった直接アニメーションが、ページがロードされなかった場合は何をフェードアウト。ページが読み込まれたときにアニメーション化することをお勧めします（私の例を参照）。

よろしくお願いします。
Sinestro White