Question

使用addClass和removeClass我有以下内容：

$("#sidebar-bottom-feature").addClass("display-none");

这会使元素按预期消失。

然后说到更换元素

$("#sidebar-bottom-feature").removeClass("display-none");

#sidebar-bottom-feature {
    border-radius: 0;
    border: 0;
    padding: 10px 40px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    transform: 1s all;
    height: 80px;
    margin-bottom: -80px;
    background-color:#F1F1F1
}
.display-none {
    opacity: 0  
}

我想在1s all之后发生fadeOut，但是在3s延迟之后发生fadeIn（removeClass）。如果您向3s all添加：display-none，则会为addClass和removeClass添加3秒的延迟。

我怎么能有不同的时间？

我确实尝试添加另一个类而不是删除，然后在转换后删除旧类但转换延迟时间没有变化。

任何指导都会受到极大的欢迎。

Answer 1

您可以使用setTimeout

 // wait 1 second before hiding the element
setTimeout(function(){
   $("#sidebar-bottom-feature").addClass("display-none");
}, 1000);

// wait 3 seconds before showing the element
setTimeout(function(){
   $("#sidebar-bottom-feature").removeClass("display-none");
}, 3000);

您还可以使用.delay()。

如果你使用show and hide，你甚至不需要添加一个类：

$("#sidebar-bottom-feature").delay(1000).hide(0);
$("#sidebar-bottom-feature").delay(3000).show(0);

如何获得addClass和removeClass动画的不同转换延迟时间？

1 个答案: