jQuery chéo mờ dần hai hình ảnh trên một vòng lặp!

Question

Tôi đang gặp khó khăn khi tìm hiểu làm thế nào để có được một fade đơn giản trong fade out loop để làm việc. Tôi khá mới với jQuery như bạn có thể nói. Tôi đã có một đi vào nó, nhưng bây giờ nó mất quá nhiều thời gian để làm việc ra vì vậy tôi nghĩ rằng tôi sẽ yêu cầu giúp đỡ một số.

Những gì tôi muốn làm:

tôi có hai hình ảnh, id của # img1 và # img2. Tôi muốn hình ảnh 1 để fadeIn sau đó chờ đợi cho phép nói 6 giây sau đó mờ dần. Tôi đã thử các chức năng .wait nhưng nó chỉ dừng lại chút ít tôi đã làm việc. Tôi xoay xở để có được hình ảnh đầu tiên mờ đi và sau đó ra ngoài nhưng không phải chờ đợi ở giữa. Sau đó tôi muốn bắt đầu mờ dần hình ảnh 2 trong khi hình ảnh 1 mờ dần rồi Hình 2 đợi sau đó mờ dần trong khi hình ảnh 1 mờ dần và lặp lại mãi mãi! Hy vọng rằng có ý nghĩa.

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

Chúc mừng, điều đó làm tôi phát điên. Ps bạn có thể thử và đưa ra một lời giải thích nhỏ cho những gì đang xảy ra trong bạn trả lời. Cảm ơn

Answer 1

Sửa 2+ năm sau: Có nhiều cách tốt hơn để làm điều này ... nên bỏ qua câu trả lời này.

---

Tôi sẽ thử kết hợp gọi lại và setTimeout. (Tôi sẽ xây dựng dựa trên câu trả lời của Kobi, kể từ khi anh ấy đăng trong khi tôi đang gõ.)

Trong CSS, cung cấp cho cả hai hình ảnh một "display: none;" thay vì đặt chúng thành ẩn ở đầu trong jQuery. Sau đó, trong 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(); 
}); 

Hy vọng điều gì đó tương tự như bạn làm việc.

Hàm setTimeout nhận hai tham số.

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT) 

Và chức năng FadeIn/Out có thể có tham số thứ hai sẽ kích hoạt khi hiệu ứng kết thúc.

Answer 2

Tại sao bạn không sử dụng giải pháp đã được thực hiện như Cycle plugin?

Nó có nhiều tùy chọn hơn bạn muốn làm.

Nếu bạn thực sự cần thực hiện việc này một mình, bạn có thể xem tại mã nguồn của plugin. Tôi đã không làm điều đó, nhưng tôi nghĩ rằng coder sử dụng một sự kết hợp của các chức năng animate (từ jQuery) và chức năng setTimeout (từ hoàn toàn javascript). Sử dụng các chức năng đó, anh ta phải làm một cái gì đó như để kích hoạt bộ đếm thời gian trong một khoảng thời gian và khi thời gian hoàn thành, anh ta thực hiện chức năng animate thiết lập độ mờ của hình ảnh thành 0 (cho hình ảnh ẩn) và 1 (cho hình ảnh hiển thị).

Answer 3

Bạn có thể sử dụng kết hợp các lời gọi lại của jQuery và JavaScript setTimeout.
setTimeout được sử dụng cho sự chậm trễ, và gọi lại được sử dụng sau khi hình ảnh động hoàn thành (có nhiều callbacks khác mặc dù).

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

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

Nhìn thấy nó trong hành động: http://jsbin.com/ulugo

Answer 4

Dưới đây là bốn trình chiếu lặp hình ảnh không sử dụng hàm setTimeout, nhưng thay vào đó sử dụng chức năng trì hoãn.

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

nhìn thấy nó trong hành động http://www.erestaurantwebsites.com/

Answer 5

Dựa trên chậm trễ() chức năng, đây là giải pháp cho số lượng hình ảnh, nếu vòng lặp của hình ảnh với số lượng lớn hơn cần thiết. Điều này cho hiệu ứng B-> crossfade (hoặc xóa + fadems/2 cho hiệu ứng fadeOutIn đơn giản). Tâm trí - hình ảnh phải ở vị trí: tuyệt đối! (xem ví dụ 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: lưu ý: id hình ảnh tiếp theo là vươn bởi ++: # img1, img2 #, # img3 .... # img128, vv

<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 sử dụng hình ảnh PNG trong suốt để có hiệu quả tốt hơn.

Answer 6

Đây là cách tôi sẽ làm điều đó với jQuery đơn giản. Xem đoạn mã hoạt động.

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