Question

我遇到了交叉淡入淡出。我的图像渐渐变成了黑色，但我不知道如何重新设计这个图像以进行交叉渐变。

var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes

setInterval(function() { // an interval
    counter++; // increase the counter
    $element.fadeOut(500, function() { // fade out the element
    $element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
    addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
    fadeIn(500); // show the element
  });
}, 3000)

.container {
  width: 100vw;
  height: 100vh;
}

.bg1 {
  background-color: red;
}

.bg2 {
  background-color: green;
}

Answer 1

使用CSS可以更好地实现这一点。

$(document).ready( function()
{
  var counter = 1;
  setInterval( function() 
  {
      // current
      var current = '.bg' + counter % $('.bg').length;
      counter++;
      var next = '.bg' + counter % $('.bg').length;
      
      $( current ).addClass('bg-fadeout');
      $( next ).removeClass('bg-fadeout');
  }, 1000);
})

.bgs {
  position: relative;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  opacity: 1;
  transition: opacity 0.3s linear;
}

.bg-fadeout {
  opacity: 0;
}

.bg1, .bg3 {
  background-color: red;
}

.bg4, .bg2 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bgs">
  <div class="bg bg4"></div>
  <div class="bg bg3"></div>
  <div class="bg bg2"></div>
  <div class="bg bg1"></div>
<div>

用js / jQuery交叉淡化3+图像

1 个答案: