Question

我有这行代码，我用它来改变class1从class1到class4来改变我的网站的背景。我想在每次课堂改变时添加一个fadeIn，我该怎么办呢？感谢

这是我的代码：

$(document).ready(function () {
  var counter = 1;
   int = setInterval(function(){
   $("#transition").attr("class", "class" + counter);
   if (counter === 4){
       counter = 1;
   } else {
       counter++;
   }
  }, 3000);
});

Answer 1

最佳性能和最简单的方法是使用transition在CSS中控制此项，请参阅here以获取转换背景的示例。

所以要使用你的代码结构：只需为你指定的每个css类添加transition +不同的背景颜色。

Answer 2

交换机的背景需要两层：

＆＃13;

var backIndex = 1;
setInterval(changeBackground, 3000);

$(document).ready(function(){
   $("#transition1").addClass("class1").css("z-index",1);
   $("#transition2").addClass("class2").css("z-index",0);
});

function changeBackground(){
  $("#transition1").fadeOut({complete: function(){
    $("#transition1")
      .removeClass("class" + (((backIndex + 1) % 4) + 1))
      .addClass("class" + (((backIndex + 2) % 4) + 1))
      .fadeIn({complete: function(){
        backIndex++;
        $("#transition2") 
          .removeClass("class" + (((backIndex + 1) % 4) + 1))
          .addClass("class" + (((backIndex + 2) % 4) + 1 ));     
      }});
  }});
}

＆＃13;

.class1 {
  background-image: url("https://placeimg.com/640/480/nature");
}

.class2 {
  background-image: url("https://placeimg.com/640/480/arch");
}

.class3 {
  background-image: url("https://placeimg.com/640/480/animals");
}

.class4 {
  background-image: url("https://placeimg.com/640/480/people");
}

#transition1, #transition2 {
  position: absolute;
  z-index: 0;
  left:0;bottom:0;right:0;top:0;background-size: cover;
}

＆＃13;

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

＆＃13;

注意：点击＆＃34;运行代码段＆＃34;然后＆＃34;整页＆＃34; ;）

Answer 3

FadeIn是出现一些元素的效果，并且记住背景不是元素。所以你不能使用fadeIn进行背景更改。我认为最好的选择是使用jquery switchClass 功能：

$(document).ready(function () {
    var counter = 4;
    int = setInterval(function(){
    var oldClass = "class" + counter;
    counter = counter == 4 ? 1 : counter + 1;
    var newClass = "class" + counter;
    $("#transition").switchClass(oldClass, newClass, 500/*or any value you want*/);
    }, 3000);
});

Answer 4

您可以存储引用要在数组中设置的背景图像的URL;使用$.when()，$.Deferred()等待所有图片都加载完毕;在load事件img移除图片时，为每个图片css添加style到src元素，以将background-image设置为加载图片;在.then()链接到$.when()将#transition opacity设置为0;在下一个链接.then()致电.animate()，将#transition opacity设为1;使用progress的{{1}}选项将.animate()父元素#transition设置为className子元素的当前className;其中父元素#transition css设置为动画元素transition的1.5倍，以交叉淡化duration和background-image的{{1}}属性父元素;使用#transition，#transition轮换与.shift()总.push()对应的className索引，该.length索引应设置和取消设置;在最后background-images递归调用命名函数重复进程

＆＃13;

.then()

＆＃13;

$(function() {
 
  var [width, height] = [window.innerWidth, window.innerHeight];       
  var [transition, style] = [$("#transition"), $("style")];
  var images = [`url(http://lorempixel.com/${width}/${height}/cats)`
               , `url(http://lorempixel.com/${width}/${height}/nature)`
               , `url(http://lorempixel.com/${width}/${height}/city)`
               , `url(http://lorempixel.com/${width}/${height}/technics)`];
  var indexes = Array.from(images.keys());

  $.when.apply($, $.map(images, function(src, index) {
    return $.Deferred(function(dfd) {
      var img = new Image;
      img.onload = function() {
        $("style")
        .append(`.transition-${index}{background-image:${src}}`);
        dfd.resolve(src);
        $(img).remove();
      };
      img.onerror = dfd.reject;
      img.src = src.replace(/^url\(|\)$/g, "");;
    })
  }))
  .then(function() {
    return transition.addClass(`transition-${indexes[0]}`).css("opacity", 0)
  })
  .then(function animate() {  
    return transition
      .animate({opacity: 1}, {
        duration:3000,
        progress: function(promise, prop, now) {
          if (now <= promise.duration / 2) {
            transition.parent().removeClass()
            .addClass(this.className)
          }
        }
      })
      .promise()
      .then(function() {
          return transition
          .delay(3000)
          .animate({opacity:0}, 3000)
          .promise()
          .then(function() {
            transition
            .removeClass(`transition-${indexes[0]}`);
            indexes.push(indexes.shift());
            return transition.addClass(`transition-${indexes[0]}`);
          })
        }).then(animate)
    })
    .fail(function(err) {
      console.log(err)
    })
})

＆＃13;

#transition-wrapper, #transition {
  width: 95vw;
  height: 95vh;
  position:absolute;
  top:0;
}

#transition-wrapper {
 transition: background-image 4.5s ease-in-out;
}

＆＃13;

如何在使用.attr时添加fadeIn

4 个答案: