javascript - 简单的 Javascript div 淡入不起作用

Question

下面是我当前用来淡入 4 个 div 的代码，每个 div 之间有 2 秒的间隔。我在 BXslider 中使用它，因此当幻灯片滑入 View 时，将加载 4 个 div。然而，尽管这是一段非常简单的编码。它不会在任何 div 中消失，它们就在那里。有人能看到我做错了什么吗？

谢谢

我的 JavaScript

<script>
$(document).ready(function() {
$('#element1').delay(2000).fadeTo(0, 2000);
$('#element2').delay(4000).fadeTo(0, 2000);
$('#element3').delay(6000).fadeTo(0, 2000);
$('#element4').delay(8000).fadeTo(0, 2000);
});
</script>

我的 HTML

<ul class="bxslider">
<li style="background-image: url(images/slide1.png);"><div>
<div id="element1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">we are the cambridge graphic design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="element2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">we design brochures, catalogues, business cards, leaflets, cd covers and much much more. </h2>
</div>
</li> 
<li style="background-image: url(images/slide2.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge website design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">offering bespoke, creative website design for small and large businesses of all types to help increase sales. </h2>
</div></li>
<li style="background-image: url(images/slide3.png);;"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge budget design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">offering budget & templated websites, business rebranding, start up business rebranding and much much more.</h2>
</div></li>
<li style="background-image: url(images/slide4.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge advertising agency...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">we provide 6 month or 12 month advertising schedules as well as one off adverts for many, many businesses.</h2>
</div></li>
<li style="background-image: url(images/slide5.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are cambridge copy writers...</h1>
</div>
<div id="div2" style="margin:200px;">
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">whether you have an article, a poem or a novel, we will review, edit or write it for you.</h2>

由于某种原因，到目前为止，所有答案都没有帮助:(，我也刚刚尝试了下面的代码，但没有任何帮助!

$(function() {  
$('#div1, #div2, #div3, #div4').each(function(i) {
    $(this).delay(i * 2000).fadeIn(1000);
});
});

Answer 1

试试这个

http://fiddle.jshell.net/y5p6udau/

$(document).ready(function() {
$('#element1').delay(2000).fadeOut(2000);
$('#element2').delay(4000).fadeOut(2000);
$('#element3').delay(6000).fadeOut(2000);
$('#element4').delay(8000).fadeOut(2000);
});

无论如何，这是一个非常糟糕的方法，我会使用所有后退功能来触发下一个淡出。