JQuery intersects two images in a loop!

Question

I am having trouble developing how to get a simple fade in a fade cycle to work. I am new to jQuery, as you can tell. I went for it, but now it worked for too long, so I thought I would ask for help.

What I want to do:

I have two images, id # img1 and # img2. I want image 1 to be fadeIn, then wait for it to say that after 6 seconds it will disappear. I tried the .wait function, but it just stopped the work I got from work. I managed to get the first image that will disappear and then come out, but without waiting between them. Then I want to start fading image 2 while image 1 is fading, and then image 2 to wait, then disappear, and image 1 will disappear again and loop forever! Hope this makes sense.

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

Cheers, it drives me crazy. Ps you can try to give a little explanation of what is happening in your answer. Thanks

Answer 1

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 .

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)

fadeIn/Out , .

Answer 2

-, setTimeout, .

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

, Cycle plugin?

, .

, . , , animate ( jQuery) setTimeout ( javascript). , - , , 0 ( ) 1 ( ).

Answer 4

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 5

delay(), , . B- > A ( + fadems/2 fadeOutIn). - : 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: : ++: # 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 use transparent PNG images for better effect.

Answer 6

This is how I will do it with simple jQuery. See Working Snippet.

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

Run code