當使用fadeIn/fadeOut對元素進行動畫處理時，其上的元素閃爍

演示JSFiddle，一旦頁面加載過渡將在3秒後歸檔。當使用fadeIn/fadeOut對元素進行動畫處理時，其上的元素閃爍

當圖像淡入/淡出時，左上角的按鈕閃爍。它不是特定於按鈕，可以是div或其他元素而不是按鈕。它也不是特定於Bootstrap，如果你刪除Bootstrap CSS也會發生同樣的事情。

這是flickering velocity.js的具體還是CSS動畫的一般問題？大約花了一個小時搜索互聯網後，找不到可用的東西。

這怎麼解決？

N.B.而得到警告寫這篇文字的jsfiddle鏈接必須由代碼陪伴，所以這裏是示例代碼：

HTML：

<div class="buttons"> 
    <button class="btn btn-warning">one</button> 
    <button class="btn btn-primary">two</button> 
</div> 
<div id="container"> 
    <!-- CC BY: Timelapse Lezard by Deevad --> 
    <img class="first" src="http://pre02.deviantart.net/6eb5/th/pre/f/2011/237/d/2/timelapse_lezard_by_deevad-d47rwef.png"> 
    <!-- CC BY: The Achkinnal Falls by FerdinandLadera --> 
    <img class="second" src="http://img09.deviantart.net/a98b/i/2012/272/d/4/the_achkinnal_falls_by_ferdinandladera-d5gatw1.jpg"> 
</div>

CSS：

body 
{ 
    margin: 0px; 
    overflow: hidden; 
    background-color: #000000; 
} 

#container 
{ 
    width: 100%; 
    height: 100%; 
} 

img 
{ 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
} 

.buttons 
{ 
    position: absolute; 
    top: 20px; 
    left: 20px; 
}

的Javascript：

$(document).ready(function(){ 

$('.second').hide() 

const showNextImage = function() 
{ 
    $('.first') 
    .velocity('fadeOut', 
    { 
     duration: 500, 
     complete: function() 
     { 
      $('.second') 
      .velocity('fadeIn', 
      { 
       duration: 500 
      }) 
     }, 
    }) 
} 

setTimeout(showNextImage, 3000) 


})

來源

2017-07-14 nidalpres

這是固定的：https://jsfiddle.net/q7phyrsg/2/

您需要在您的按鈕上使用z-index: 999，因爲圖像位於其上。

來源

2017-07-14 16:30:24

問題在於圖像div出現在HTML中的按鈕之後，因此圖像放置在按鈕的頂部。解決閃爍問題的一種方法是在圖像div之後移動按鈕div，如果無法移動div，則在按鈕上設置z-index足夠高，以便將div放在圖像上方。感謝庫珀！ – nidalpres

當使用fadeIn/fadeOut對元素進行動畫處理時，其上的元素閃爍

回答

相關問題