Question

我有以下代码：

HTML：

<div id="container">
    text text text
</div>

<img id="img1" src="img1.png" />
<img id="img2" src="img2.png" />

CSS：

#container {
    display: block;
    margin-top: 0vh;
    transition: margin-top 1s ease-in 0.1s, display 0.1s linear 5s ;
}

JS：

$("img#img1").on('click', function () {
    $("#container").css('margin-top', '50vh');
    $("#container").css('display', 'none');
});

$("img#img2").on('click', function () {
    $("#container").css('margin-top', '0vh');
    $("#container").css('display', 'block');
});

查看CSS文件，我的意图是：

margin-top属性，0.1秒后改变，持续1秒
显示属性，5秒后更改，持续0.1秒

但它不起作用。单击图像后立即更改显示属性。

如何解决？

Answer 1

要在JavaScript中添加延迟，您可以使用setTimeout功能。

要在代码中添加五秒钟的延迟，您需要执行以下操作：

$("img#img1").on('click', function () {
    $("#container").css('margin-top', '50vh');
    setTimeout(function() {
        $("#container").css('display', 'none');
    }, 5000);
});

$("img#img2").on('click', function () {
    $("#container").css('margin-top', '0vh');
    setTimeout(function() {
        $("#container").css('display', 'block');
    }, 5000);
});

此代码中的5000是以毫秒为单位表示的5秒。希望其余部分是不言自明的 - 指定了一个在设定的时间长度后执行的函数。

不太确定你将display改为0.1秒的意思。显示一个元素，或者它不是 - 中间没有元素。如果想要褪色，请改变其不透明度。您可能应该删除＆＃34; , display 0.1s linear 5s＆＃34;来自你的CSS。

显示转换（多次转换）

1 个答案: