Question

下面是我目前用于淡入4个div的代码，每个div间隔2秒。我在BXslider中使用它，因此当幻灯片滑入视图时，将加载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);
});

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

Answer 2

语法为fadeTo(duration, opacity)，但您将不透明度作为第一个参数。如果你想淡入，你的不透明度应为1（或者只使用fadeIn()）。

Answer 3

<div id="slideshow">
 // wrap everything inside her
</div>

JS

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

    function SlideShow() {
        $('#slideshow > div:gt(0)').hide();  
        setInterval(function () {
            $('#slideshow > div:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
        }, 2000);
    }

简单的Javascript div Fade-In无效

3 个答案: