修改以使脚本交叉淡化而不是淡出然后淡入

Question

以下脚本设置为淡出，然后淡入下一个横幅集。我想知道如何将其修改为交叉淡入淡出，以便下一个横幅集在现有横幅上淡出，然后消失。它会看起来更清洁。

我见过一堆用于交叉淡入淡出的脚本;然而，因为这个脚本淡化了“儿童”元素，不知道如何修改它们来完成这项工作。

如果有更好的方式来做到这一点，请让我知道，

$(function() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 9000; 
    var transition_speed = 1000; 

    var simple_slideshow = $("#graphic_1"), 
     listItems   = simple_slideshow.children('.banner'), 
     listLen    = listItems.length, 
     i     = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(transition_speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(transition_speed); 



      }); 

     }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 


}); 

HTML/PHP（只是让你们都可以看到数据的外观）

$rotban1 = $db1->query("SELECT background_image, background_image_alt, foreground_image, foreground_image_alt, text FROM banner") or die ('Unable to execute query. '. mysqli_error($db1con)); 
$slidecount == 0; 
    if ($rotban1->num_rows > 0) { 
while ($slide = $rotban1->fetch_assoc()) { 

echo '<div class="banner">'; 
echo '<img class="background_image" alt="'. $slide['background_image_alt'] .'" src="'. $slide['background_image'] .'">'; 
    echo '<img class="foreground_image" alt="'. $slide['foreground_image_alt'] .'" src="'. $slide['foreground_image'] .'">'; 
    if (!empty($slide['text'])) { echo '<h1>'. $text .'</h1>'; } 
echo '</div>'; 
} 
    } 

Answer 1

你叫fadeIn后fadeOut完成。

尝试在同一时间打电话给他们两个，要做到不使用回调函数：

changeList = function() { 
    listItems.eq(i).fadeOut(transition_speed); 
    i += 1; 
    if (i === listLen) { 
     i = 0; 
    } 
    listItems.eq(i).fadeIn(transition_speed); 
}; 

这样，fadeOut和fadeIn动画在同一时间启动（忽略毫秒）

Answer 2

相反当第一个效果结束时调用一个效果，请使用.animate()方法并将queue选项设置为false，并同时运行它们。

changeList = function() { 

    listItems.eq(i).animate(
    { opacity:0 }, 
    { 
     queue: false, 
     duration: 3000 
    }); 

    i += 1; 
    if (i === listLen) { 
    i = 0; 
    } 

    listItems.eq(i).animate(
    { opacity:1 }, 
    { 
     queue: false, 
     duration: 3000 
    }); 

}; 

这里有一个工作示例：

$("#red").animate({ 
 
     opacity:0 
 
    }, { 
 
     queue: false, 
 
     duration: 3000 
 
}); 
 

 
$("#blue").animate({ 
 
     opacity:1 
 
    }, { 
 
     queue: false, 
 
     duration: 3000 
 
});

div { width:50px; height:50px; position:absolute; top:0; } 
 
#red { background:red; } 
 
#blue { background:blue; opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="red"> 
 

 
</div> 
 
<div id="blue"> 
 

 
</div>

Answer 3

您可以使用csstransition和opacity，position:absolute，setTimeout()和.eq()为 “淡入淡出” 元素opacity渲染

function crossFade(n) { 
 
    setTimeout(function() { 
 
    $("div img").eq(n).css("opacity", 0); 
 
    $("div img").eq(n).prev("img").css("opacity", 1); 
 
    setTimeout(function() { 
 
     if (--n > 0) { 
 
     crossFade(n) 
 
     } else { 
 
     setTimeout(function() { 
 
      $("div img").css("opacity", 0).eq(len) 
 
      .css("opacity", 1); 
 
      setTimeout(function() { 
 
      crossFade(len) 
 
      }, 1500) 
 
     }, 1500) 
 
     } 
 
    }, 1500) 
 
    }, 1500) 
 
} 
 

 
const len = $("div img").length - 1; 
 

 
crossFade(len);

body { 
 
    width: 100vw; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    left: calc(50vw - 100px); 
 
} 
 

 
div img { 
 
    transition: opacity 3s ease-in-out; 
 
    position: absolute; 
 
} 
 

 
div img:not(:nth-child(3)) { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <img src="https://lorempixel.com/200/200/cats" alt=""> 
 
    <img src="https://lorempixel.com/200/200/nature" alt=""> 
 
    <img src="https://lorempixel.com/200/200/sports" alt=""> 
 
</div>