jQuery：同时fadeIn和fadeOut [英] jQuery: simultaneously fadeIn and fadeOut

问题描述

由setInterval定期调用的以下代码执行以下序列：

1.淡入图像750毫秒

2.将其覆盖6秒钟

3.淡出图像750毫秒

4.随机选择另一张图像（函数randomPic）

5.淡入750毫秒等等：

the following code which is called periodically by setInterval performs the following sequence:
1. fade in an image for 750 msec
2. diplay it for 6 secs
3. fade out the image for 750 msec
4. randomly select another image (function randomPic)
5. fade in for 750 msec and so on:

$("#_fadee_").fadeIn(750, function() {
    $("#_fadee_").delay(6000).fadeOut(750, randomPic);
});

你可以看到效果此处。如何才能获得旧图像的淡入淡出和新图像的淡入淡出同时运行？

You can see the effect here. How can I get the fadeOut of the old image and the fadeIn of the new one to run simultaneously?

谢谢，Ralf

推荐答案

基本上，你需要加载另一个div中的新图像，图像下方的z-index逐渐消失。并不是它同时消失，它刚刚被揭开，因为最初的消失。一旦顶部div完全淡出，您将新图像加载到其中并将其不透明度返回到1，以便它覆盖您将加载下一个图像的div。在伪代码中，它看起来像这样：

Basically, you need to load the new image in another div that has a z-index beneath the image fading out. It's not that it's fading in simultaneously, it's just uncovered as the initial is fading out. Once the top div is faded out completely, you load the mew image into it and return its opacity to 1 so that it covers the div that you will load the next image into. In pseudocode it would look something like this:

var fadeO = function () {
    var $fo = $('#_fadeO_');
    var $fi = $('#_fadeI_');
    var newImg = // load image here;

    $fi.html(newImg);

    $fo.fadeOut(1500, function() {
        // put #_fadeO_ back on top with new image
        $fo.html(newImg);
        $fo.css({'display':'block', 'opacity':1});

        // call function again after 6 seconds
        setTimeout(fadeO, 6000);
    });
};

fadeO();

...但我做了一个小提琴，所以你可以看到它在行动，切换背景颜色而不是图像内容。您应该能够了解如何基于上面的伪代码对加载的图像执行相同的操作以及如何在此处设置HTML，CSS和JS：

...but I made a fiddle of it so you could see it in action, switching background colors instead of image contents. You should be able to get the idea of how to do the same with loaded images based on the above pseudo-code and how the HTML, CSS, and JS is set up here:

http://jsfiddle.net/UbmS9/

这篇关于jQuery：同时fadeIn和fadeOut的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！