Question

我在这里看到了类似的问题，但是没有一个问题在一个窗口上起作用，而在下一个窗口上没有效果。

使用jQuery库3.4.1。代码已经过测试，可以在Firefox中运行，但是Chrome不能很好地播放-动画不在那里，它会立即打开或关闭窗口，而没有指定的200微秒延迟。

这是一个简单的设置，我有一个带有onclick事件的div，它可以切换另一个div的可见性。现在可见的div具有另一个onclick事件以将其关闭/隐藏。这两个事件都有200ms的延迟。

我在声明的库中使用的JS;

<script>
    /* Window Toggle */
    function toggleWindow() {
        var elem = document.getElementById('window');
        $('#window').toggle(200);
        return false;
    }

    /* Window Close */
    function closeWindow() {
        var elem = document.getElementById('window');
        $('#window').hide(200);
        return false;
    }
</script>

HTML设置

<div id="trigger-window" onclick="toggleWindow(200); return false;">Open Me</div>
<div id="window" onclick="closeWindow(200); return false;">You have opened me, now close me</div>

编辑：CSS

#window {transition:0.5s; display:none;}
/* EDIT -  The above line is problematic with Chrome */
#window {display:none;}
/* Transition effect removed, now it works with Chrome */

在页面的另一端，我使用具有不同功能名称的相同js代码来切换和关闭窗口，这在Firefox和Chrome浏览器中均能完美运行。

编辑：我如上所述检查了我的CSS并发现了问题。在下面回答。

Answer 1

我知道了。

检查CSS后，第一个在Firefox和Chrome中都可以使用的动画窗口之间的唯一区别是它没有任何过渡效果，而第二个不喜欢Chrome的窗口具有0.5s的过渡。

一旦我从div中的div移除了过渡效果，它在Chrome中就可以完美运行了。因此，看来Chrome浏览器发现CSS和JavaScript之间存在冲突，但Firefox却没有！

jQuery动画延迟在Chrome中不起作用

1 个答案: