Question

在JSFiddle上进行演示，一旦页面加载转换，将在3秒后归档。

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

这个闪烁的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 )


})

Answer 1

此处已修复：https://jsfiddle.net/q7phyrsg/2/

按钮上需要z-index: 999，因为图像放在它们上面。

当元素使用fadeIn / fadeOut进行动画处理时，其上方的元素会闪烁

1 个答案: