jQueryはループ上の2つの画像をクロスフェードします！

Question

フェードアウトループを単純にフェードアウトさせる方法を試すのに問題があります。私はあなたが多分伝えることができるように、jQueryをかなり新しくしています。私はそれをやったことがありますが、今は時間がかかりすぎて、私は何か助けを求めると思っていました。私が何をしたいか

：

私は2枚の画像、IDの＃IMG1と＃のIMG2を持っています。イメージ1をフェードインしてから6秒間待ってからフェードアウトします。私は.wait関数を試しましたが、私が働いていた小さなものを止めました。私は、最初のイメージをフェードインとフェードインさせることができましたが、その間に待ち時間はありませんでした。私はその後、画像1がフェードアウトしてから画像2がフェードアウトし始め、画像2がフェードアウトしてからフェードアウトするまで待ちます。希望は意味をなさない。

$(document).ready(function(){ 
    $('#img1').hide() 
.load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
    $('#img2').hide().wait(9000) 
    .load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
}); 

乾杯、そのは私が狂いそう。あなたはあなたが答えていることを少しでも説明しようとすることができますか？ありがとう

Answer 1

編集2+年後：...これを行うので、この答えを無視するためのより良い方法があります。

---

私はコールバックとsetTimeoutの組み合わせを試してみます。 （私が入力している間に彼が投稿したので、私はKobiの応答に基づいて構築します）。 jQueryの最初に非表示に設定するのではなく、次に、jQueryで：

function imageOneFade(){ 
    $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); }); 
} 

function imageTwoFade(){ 
    $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); }); 
} 

$(document).ready(function(){ 
    imageOneFade(); 
}); 

うまくいけば、あなたがうまくいくようなことです。

setTimeout関数は2つのパラメータをとります。

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT) 

fadeIn/Out関数には、エフェクトが終了したときにトリガーする第2パラメータを設定できます。

Answer 2

Cycle pluginのように作られたソリューションを使用してみませんか？

多くのオプションがあります。

本当に自分でこれを行う必要がある場合は、プラグインのソースコードを見ることができます。私はそれをしなかったが、私はコーダーがanimate関数（jQueryから）とsetTimeout関数（純粋にjavascriptから）の組み合わせを使用すると思う。これらの関数を使用すると、タイマーを一定時間有効にするのと同じようなことをしなければならず、時間が終わると画像の不透明度を0（画像隠蔽の場合）および1（画像表示の場合）に設定するアニメーション機能を実行します。

Answer 3

jQueryのコールバックとJavaScript setTimeoutを組み合わせて使用​​できます。
setTimeoutは遅延に使用され、コールバックはアニメーションが完了した後で使用されます（ただし、他にも多くのコールバックがあります）。

function startSlideshow(){ 
    $('#p1').fadeOut(2000, function(){ 
    setTimeout(function(){ 
     $('#p1').fadeIn(2000, startSlideshow) 
    },1000); 
    }); 
} 

$(document).ready(function(){ 
    startSlideshow(); 
}); 

は、アクションでそれを参照してください： http://jsbin.com/ulugo

Answer 4

ここには、setTimeout関数を使用しない代わりに遅延関数を使用する4つの画像ループスライドショーがあります。大きな数字の画像のループが必要な場合は

<script> 
    function startSlideshow(){ 
    $("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000 
    $("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000 
    $("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000 
    $("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000 
    } 

    $(document).ready(function(){ 
    startSlideshow(); 
    }); 
</script> 

が遅延（）関数に基づいて行動http://www.erestaurantwebsites.com/

Answer 5

でそれを参照してください、ここでは画像の数のためのソリューションです。これにより、B→Aクロスフェード効果が得られます（または単純なfadeOutIn効果のために+ fadems/2を削除します）。マインド - イメージは位置になければなりません：絶対的！重要; （htmlの例を参照）。

のjQuery：

function startSlideshow(){ 

    var dms = 2500; // image show duration in ms 
    var fadems = 750; // crossfade in ms 
    var imgnum = 5; // total number of images 
    var nms = 0; 

    // fadeInOut first image 
    $("#img1").fadeIn(fadems).delay(dms).fadeOut(fadems); 
    nms = nms + fadems*2 + dms- fadems/2; 

    // fadeInOut rest images 
    for (var i = 2; i<imgnum; i++){ 
     // remove +fadems/2 for fadeOut effect, instead of crossfade 
     $("#img"+i).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems+fadems/2); 
     nms = nms + fadems*2 + dms - fadems/2; 
    } 
    // fadeInOut last image and start over 
     $("#img"+imgnum).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems, startSlideshow); 
} 

startSlideshow(); 

HTML：注：次の画像IDは++によって発祥されます。＃IMG1、＃1 IMG2、＃1 IMG3 ....＃1 img128等

<style> 
    .crossfade { 
     /* image width and height */ 
     width: 160px; 
     height: 120px; 
     display: none; 
     position: absolute !important; 

    } 
</style> 

<div class="place_your_images_container_where_is_needed"> 

    <div id="img1" class = "crossfade" > 
     <img src="imageOne.png" /> 
    </div> 

    <div id="img2" class = "crossfade" > 
     <img src="image2.png" /> 
    </div> 

    <div id="img3" class = "crossfade" > 
     <img src="image3.png" /> 
    </div> 

    <div id="img4" class = "crossfade" > 
     <img src="imageFour.png" /> 
    </div> 

    <div id="img5" class = "crossfade" > 
     <img src="imageLast.png" /> 
    </div> 

</div> 

psより良い効果のために透明なPNG画像を使用してください。

Answer 6

これは単純なjQueryでこれを行う方法です。作業スニペットを参照してください。私がemployeerになることによってこれを行うには求められていると私は、彼らはそれを行うように頼まれている方法に固執する必要があるため

loopStart(); 
 

 
function loopStart() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
    loopTwo(); 
 
    }); 
 
}; 
 

 
function loopOne() { 
 
    $("#image1").fadeIn("slow", function() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
     loopTwo(); 
 
    }); 
 
    }); 
 
}; 
 

 
function loopTwo() { 
 
    $("#image2").fadeIn("slow", function() { 
 
    $("#image2").delay(2000).fadeOut("slow", function() { 
 
     loopOne(); 
 
    }); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://lorempixel.com/city/200/200"> 
 
<img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">