5

単純なフェードインフェードアウトループを機能させる方法を理解するのに問題があります。お分かりのように、私はjQueryを初めて使用します。試してみましたが、時間がかかりすぎて助けを求めたいと思いました。

私がやりたいこと：

IDの＃img1と＃img2の2つの画像があります。画像1をフェードインしてから、たとえば6秒待ってからフェードアウトします。.wait関数を試しましたが、動作が停止しました。最初の画像をフェードインしてからフェードアウトさせることができましたが、間に待つ必要はありませんでした。次に、画像1がフェードアウトしている間に画像2のフェードインを開始し、次に画像2が待機してから、画像1が再びフェードインして永久ループする間にフェードアウトします。それが理にかなっていることを願っています。

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

乾杯、それは私を夢中にさせます。Psは、あなたが答える中で何が起こっているのかについて少し説明してみてください。ありがとう

4

6 に答える 6

10

これは、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/

于 2011-09-24T04:08:25.100 に答える
6

Cycleプラグインのようにすでに作られたソリューションを使ってみませんか？

それはあなたがしたいよりもたくさんのオプションがあります。

本当に自分でこれを行う必要がある場合は、プラグインのソースコードを見ることができます。私はそれをしませんでしたが、コーダーはアニメーション関数（jQueryから）とsetTimeout関数（純粋にjavascriptから）の組み合わせを使用していると思います。これらの関数を使用して、タイマーを一定時間有効にするなどの操作を行う必要があります。時間が完了すると、アニメーション関数を実行して、画像の不透明度を0（画像の非表示）と1（画像の表示）に設定します。

于 2009-09-06T18:48:03.280 に答える
4

2年以上後に編集：これを行うにはもっと良い方法があります...だからこの答えは無視してください。

コールバックとsetTimeoutの組み合わせを試してみます。（私が入力している間に彼が投稿したので、私はコビの応答に基づいて構築するつもりです。）

CSSで、両方の画像に「display：none;」を付けます。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番目のパラメーターを含めることができます。

于 2009-09-06T19:39:08.077 に答える
1

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

于 2009-09-06T19:26:33.733 に答える
0

delay（）関数に基づいて、より多くの画像のループが必要な場合の画像数の解決策を次に示します。これにより、B-> Aクロスフェード効果が得られます（または、単純なfadeOutIn効果の場合は+ fadems / 2を削除します）。心-画像は正しい位置にある必要があります：absolute！important; （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、＃img2、＃img3 ....＃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画像を使用します。

于 2015-01-27T15:28:49.300 に答える
0

これは私が単純なjQueryでそれを行う方法です。作業スニペットを参照してください。

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">

于 2016-09-03T20:58:10.183 に答える