javascript - 当元素使用 fadeIn/fadeOut 进行动画处理时，其顶部的元素会闪烁

Question

演示位于 JSFiddle ，页面加载后，过渡将在 3 秒后归档。

当图像淡入/淡出时，左上角的按钮会闪烁。它不是特定于按钮的，可以是 div 或其他元素来代替按钮。它也不是特定于 Bootstrap 的，如果删除 Bootstrap CSS，也会发生同样的情况。

这个闪烁的velocity.js是特定的还是CSS动画的普遍问题？在互联网上搜索了大约一个小时后，找不到任何可用的东西。

如何解决这个问题？

注意在编写本文时收到警告，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 )


})

Answer 1

这里已修复:https://jsfiddle.net/q7phyrsg/2/

您的按钮上需要 z-index: 999 因为图像位于按钮之上。