2016-11-30 116 views
2

我有一个感言滚动显示一个证言,淡出,显示下一个,淡出,并返回到第一个。让一个感言滚动在屏幕前留在屏幕上

我的问题是,淡入淡出动画后,淡出动画立即开始。它没有给人足够的时间阅读它。

$(document).ready(function() { 
    function doFade() { 
     $("#one").fadeIn(6000,function() { 
      $("#one").fadeOut(6000).delay(3000); 
      setTimeout(fadeTwo,6000); 
     }); 
    } 

    function fadeTwo() { 
     $("#two").fadeIn(6000,function() { 
      $("#two").fadeOut(6000).delay(3000); 
      setTimeout(fadeThree,6000); 
     }); 
    } 

    function fadeThree() { 
     $("#three").fadeIn(4000,function() { 
      $("#three").fadeOut(6000).delay(3000); 
      setTimeout(doFade,6000); 
     }); 
    } 
    doFade(); 
}); 

回答

0

jQuery的延时功能只会延误被称为功能后链,因此它正在对你的代码没有任何影响。 Delay docs

您需要在调用fadeOut之前使用它,例如,

$(document).ready(function() { 
    function doFade() { 
     $("#one").fadeIn(6000,function() { 
      setTimeout(fadeTwo,6000); 
     }) 
     .delay(3000) 
     .fadeOut(6000); 
    } 

    function fadeTwo() { 
     $("#two").fadeIn(6000,function() { 
      setTimeout(fadeThree,6000); 
     }) 
     .delay(3000) 
     .fadeOut(6000); 
    } 

    function fadeThree() { 
     $("#three").fadeIn(6000,function() { 
      setTimeout(doFade,6000); 
     }) 
     .delay(3000) 
     .fadeOut(6000); 
    } 
    doFade(); 
}); 

编辑:

您正在设置超时执行下一个功能,淡入的完整的回调中。这对我来说有点困惑,我认为做下面的事情更简单明了。此外,没有任何理由来定义准备功能中的三种功能 - 这是个人喜好,但我想保持一个回调到最低程度,如范围内的代码量...

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

function doFade() { 
    setTimeout(fadeTwo,12000); 
    $("#one").fadeIn(6000).delay(3000).fadeOut(6000); 
} 

function fadeTwo() { 
    setTimeout(fadeThree,12000); 
    $("#two").fadeIn(6000).delay(3000).fadeOut(6000); 
} 

function fadeThree() { 
    setTimeout(doFade,12000); 
    $("#three").fadeIn(6000).delay(3000).fadeOut(6000); 
} 

编辑2:

在进一步的努力减少我们重复自己的量,就可以提取出整个动画序列到一个函数:

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

function fadeInThenOut(element) { 
    element.fadeIn(6000).delay(3000).fadeOut(6000); 
} 

function doFade() { 
    setTimeout(fadeTwo,12000); 
    fadeInThenOut($("#one")); 
} 

function fadeTwo() { 
    setTimeout(fadeThree,12000); 
    fadeInThenOut($("#two")); 
} 

function fadeThree() { 
    setTimeout(doFade,12000); 
    fadeInThenOut($("#three")); 
} 

编辑3:

在这一点上我们可能会注意到我们的三个函数有多相似,并且想要某种方式来减少的重复性。所以我们可以使用递归,并且每次更改我们传递的元素。

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

function doFade(elementNumber) { 
    const elementNumber = elementNumber < testimonialElements.length ? elementNumber : 0; 

    setTimeout(doFade(elementNumber + 1),12000); 
    $('#' + testimonialElements[elementNumber]).fadeIn(6000).delay(3000).fadeOut(6000); 
} 

var testimonialElements = ["one","two","three"]; 

虽然这种解决方案可能会失去可读性和简单的东西,伟大的好处是,当你添加第四个见证,你不需要写一个函数来处理它。你所要做的就是改变testimonialElements数组以包含新的元素id。