Question

因此，我正在尝试制作一个简单的淡入淡出幻灯片，其中包含五张完成后重复的幻灯片。

我觉得我应该得到的应该是有用的，但事实并非如此。

<script type="text/javascript">

    $(document).ready(function() {

        function playslide(){

            setTimeout(function(){
            $("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
            setTimeout(function(){
            $("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
            setTimeout(function(){
            $("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
            setTimeout(function(){
            $("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);

        }

        playslide();

        });
</script>

这个想法是第一张幻灯片的不透明度总是设置为1，这样当最后一张幻灯片淡出时，就好像它再次开始一样。每张幻灯片在淡出前都会保持10秒，每张幻灯片淡入后，上一张幻灯片的不透明度将重新设置为0，以备下次重复使用时。

我希望这不是一个明显的错误。道歉，如果是......

Answer 1

请问为什么不使用.fadeIn()和.fadeOut()？

setTimeout(function () {
  $("#slide-two").fadeIn(400, function () {
    setTimeout(function () {
      $("#slide-two").fadeOut(function () {
      $("#slide-three").fadeIn(400, function () {
        // So on...
      });
    }, 1000);
  });
}, 1000);

最好使用这些功能代替手动设置不透明度。

Answer 2

https://jsfiddle.net/sk8ruo3u/

这是我怎么做的

var list = ['.one','.two','.three','.four'];

$.each(list, function(index, value){
    changeOpacity(value, index*1000);    
});

function changeOpacity(target, timeout) {
    setTimeout(function () {
        $(target).animate({
            opacity: 0.05
        }, 1000);
    }, timeout);
};

jQuery CSS Opacity Animate

2 个答案: