Question

这可能是重复但我找不到，所以我们在这里。按下某些按钮后，我会显示2个全屏叠加，并显示渐弱过渡。背后的逻辑应该是：

if（layerA可见）

然后（fadeOut layerA;等到转换完成; fadeIn layerB;）

else（fadeIn layerB）

代码实际上非常简单：

if (layerA.is(':visible')) {
  layerA.fadeOut("slow", function () { layerB.fadeIn("slow"); }
else { layerB.fadeIn("slow"); }

但我想知道是否有一种更优雅的方式来做它。

Answer 1

我对CSS了解不多，所以请提出你的风格。我认为你期待像下面的演示一样工作。

$('.overlay2').hide();
$('.overlay1').fadeOut('800');
setTimeout(function() {
  $('.overlay2').fadeIn('slow');
}, 800);

.overlay1 {
  background-color: #ccc;
  position: absolute;
  z-index: 1000;
  opacity: .5;
  width: 100%;
  height: 100%
}

.overlay2 {
  background-color: #333;
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay1">This is overlay 1</div>
<div class="overlay2">This is overlay 2</div>

或者简单地说：

$('.overlay2').hide();
$('.overlay1').fadeOut('800');
setTimeout(function() {
  $('.overlay2').fadeIn('slow');
}, 800);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay1">This is overlay 1</div>
<div class="overlay2">This is overlay 2</div>

Answer 2

我不知道这是不是你想要的，但这是一个简单的FadeIn＆amp;使用JQuery的两个元素的FadeOut：

$(document).ready(function() {
  $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
  $('#picTwo').delay(5000).fadeIn(1500);
});

#picOne,
#picTwo {
  display: none;
  position: absolute;
}

#pics {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pics">
  <img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" width="200" height="100" id="picOne" />
  <img src="https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" width="200" height="100" id="picTwo" />
</div>

等待元素fadeOut如果元素可见

2 个答案: