我想用CSS滑出一个元素，然后用jQuery隐藏它，但hide似乎忽略了动画

我尝试了很多方法来暂停jQuery，以便它等待CSS动画，但它总是立即跳转到.hide（）。请帮忙

以下是我当前的代码：

$('#button').on( "click", function() {
       $( "#main-content" ).toggleClass("hide-main-content").hide();
       $( "#csp-content" ).removeClass("hide-csp-content");
    });

CSS：（注意，我使用的是超级夸张的4.5s，因为我想在.hide（）启动之前确认它已经完成了。）

HTML:

主要

顾客服务提供商

在对其进行hding之前，需要检测转换结束。上面为“transitionend”元素添加了一个事件监听器，然后在触发时隐藏它。这段代码将取代您的.hide（）行。

也许，这就是一种魔力？ 下面的代码将切换2个元素的可见性。默认情况下，

#主要内容

可见，

#csp内容

隐藏

单击按钮时，我们切换类

。全局隐藏主要内容

——在

主体

（它可能是元素本身）上，这导致

#主要内容

滑出和隐藏（因此它不使用任何空间），同时

#csp内容

取消隐藏和滑入

如果这对你不起作用，请描述你想要的行为——你想实现什么

$（“#按钮”）。打开（“单击”，函数（）{
$（'body'）.toggleClass（“隐藏主要内容”）；
});
正文{
溢出x：隐藏；
}
#主要内容,，
#csp内容{
背景：粉红色；
文本对齐：居中；
宽度：60vw；
溢出：隐藏；
位置：相对位置；
排名：0；
过渡：所有1.5s的轻松进出；
}
#主要内容,，
.隐藏主要内容#csp内容{
右图：-40vw；
能见度：可见；
最大高度：10000px；
}
#csp内容，
.隐藏主要内容#主要内容{
右图：-100vw；
可见性：隐藏；
最大高度：0；
}

主要

顾客服务提供商

切换内容
尝试以下操作：

$('#button').on( "click", function() {
       $( "#main-content" ).toggleClass("slide-main-content");
       setTimeout(function() {
           $("#main-content").hide();
           $( "#csp-content" ).removeClass("slide-csp-content");
       }, 4500);
    });

OP Edit：最终这就是解决方案，这要归功于您的setTimeout（函数）：

尝试向元素添加
transitionend
事件侦听器，然后切换该类


$（“#按钮”）。打开（“单击”，函数（）{
$（“#主要内容”）.on（'transitionend'，function（）{
$（this.hide（）；
}).toggleClass（“幻灯片主要内容”）；
$（“#csp内容”）.removeClass（“幻灯片csp内容”）；
});
。幻灯片主要内容{
转变：转变1s；
转化：translateX（25%）；
}
.幻灯片csp内容{
颜色：红色；
}

主要

顾客服务提供商

button
Brandon，谢谢你的回答，但是你的代码没有运行，我得到一个控制台错误：SyntaxError:expected expression，get'，'你确定里面应该有一个双函数（）。一个？@玩家再试一次，我有一个输入错误！出于某种原因，您的代码正在破坏触发顶部单击功能的“我的”按钮<代码>$（'a#open case study'）。打开（“click”，function（）{
$（“#main content”）。切换类（“幻灯片主要内容”）；
$（“#main content”）。一个（“transitionend”，function（）{
$（“#main content”）。隐藏（）
`，false）`$（“#csp content”）。移除类(“隐藏csp内容”）；“`}”；`我不知道
one（“transitionend”，
在你的代码中做了什么，我需要一个CSS类来进行转换吗？基本上，它添加了一个事件侦听器（只有一次），这样当你的转换执行时，里面的代码就会被执行。谢谢你的尝试，但它仍然是即时的。hide（）在4500次延迟之后，什么都没有发生。Wiktor，我有一个要求，我没有提到我的部分仅在position:relative；上可见，这似乎与您的设置不匹配。有其他选择吗？@Player，您能描述一下预期的行为吗？从您的代码中，我假设您想隐藏
#主要内容
单击按钮时显示
#csp content
，但可能我想错了？我还是更改了代码，所以元素确实隐藏并使用了相对定位——试试看。嘿，巴德，谢谢。最后我使用setTimeout（函数）实现了我需要的功能，代码如下：
$（“#主要内容”）。toggleClass（“隐藏主要内容”）；setTimeout（function（）{$（“#main content”）.hide（）}，500）
$（“#csp content”）.toggleClass（“hide csp content”）；setTimeout（function（）{$（“#csp content”）.show（）}，500）
这可能并不漂亮，但它完成了任务。您的javascript正在切换名为slide main content和slide csp content的类，但HTML和CSS引用隐藏了main content和hide csp content。是否打算在两个不同的CSS类之间切换以隐藏/显示？如果是，幻灯片-*-内容类的CSS在哪里？clav，在试图将我的页面简化为针对帖子的页面时，我犯了一些错误，很抱歉，我现在更新了css。听起来像是jQuery的一项工作，您将在传递给它的完整函数中执行
removeClass
。
<section id="main-content" class="hide-main-content">
 <p>MAIN</p>
</section>

<section id="csp-content" class="hide-csp-content">
 <p>CSP</p>
</section>

$( "#main-content" ).toggleClass("slide-main-content");
$( "#main-content" ).one("transitionend", function() {
  $( "#main-content" ).hide();
}, false);

$('#button').on( "click", function() {
       $( "#main-content" ).toggleClass("slide-main-content");
       setTimeout(function() {
           $("#main-content").hide();
           $( "#csp-content" ).removeClass("slide-csp-content");
       }, 4500);
    });

$('#button').on( "click", function() {
    $("#main-content").toggleClass("hide-main-content");
        setTimeout(function(){
           $("#main-content").hide();
        }, 500);
    $("#csp-content").toggleClass("hide-csp-content");
        setTimeout(function(){
           $("#csp-content").show();
        }, 500);
});