使用 .attr 时如何添加淡入

Question

我有这行代码，我用它来改变 class 从 class1 到 class4 来改变我网站的背景。我想在每次 class 更改时添加一个 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

最佳性能和最简单的方法是在 CSS 中使用 transition 来控制它，请参阅 here 以了解过渡背景的示例。

因此，要使用您的代码结构：只需将 transition + 不同的背景颜色添加到您分配的每个 css 类中。

Answer 2

切换背景需要两层：

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 ));     
      }});
  }});
}

.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;
}

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

注意： 点击 "Run Code Snippet" 然后 "Full Page" ;)

Answer 3

FadeIn 是出现一些 element 的效果，请记住 background 不是 element.所以你不能使用 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() 等待所有图片加载完毕；在 img 的 load 事件中，删除图像，将 css 添加到每个图像的 style 元素 src 以将 background-image 设置为加载的图像；在 .then() 链接到 $.when() 将 #transition opacity 设置为 0；在下一个链接 .then() 调用 .animate() 将 #transition opacity 动画化为 1；使用 .animate() 的 progress 选项将 #transition 父元素 className 设置为 #transition 子元素的当前 className；其中父元素 css transition 设置为动画元素 duration 的 1.5 倍以交叉淡化 #transition 的 background-image 属性和 #transition父元素；使用 .shift(), .push() 旋转 className 索引对应的 .length of total background-images 应该设置和取消设置；最后递归调用命名函数 .then() 以重复过程

$(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)
    })
})

#transition-wrapper, #transition {
  width: 95vw;
  height: 95vh;
  position:absolute;
  top:0;
}

#transition-wrapper {
 transition: background-image 4.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style></style>
<div id="transition-wrapper">
  <div id="transition">
  </div>
</div>

使用 .attr 时如何添加淡入

How can I add a fadeIn when using .attr

html

jquery

fadein