Javascript 动画后添加类不使用jquery

动画后的addClass无法正常使用jquery

当我点击一个按钮时，我试图将横幅从底部向上移动，当用户再次点击时，它将返回底部并隐藏

下面是我到目前为止的代码。 第一部分有效，但第二部分无法向下滑动。。而是直接走开

感谢您的帮助

谢谢

$（文档）.ready（函数（）{
$（“#projs”）。单击（函数（）{
if（$（“#projList”）.hasClass（'hideway'））{
$（“#projList”）.removeClass（‘隐藏’）.animate({
底部：“25%”
});
}否则{
$（“#项目列表”）。设置动画({
底部：“0”
}).addClass（'hideAway'）；/.addClass（'hideAway'）；
}
});
});
.hideway{
可见性：隐藏；
}
完成动画后必须添加类

$("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})


$（文档）.ready（函数（）{
$（“#projs”）。单击（函数（）{
if（$（“#projList”）.hasClass（'hideway'））
$（“#projList”）.removeClass（'hideway'）.animate（{bottom:'20%}）；
其他的
$（“#projList”）.animate（{bottom:'0%}，function（）{$（this.addClass（'hideAway'）}）
});
});
.hideway{
可见性：隐藏；
}
这是因为即使您链接了事件，它们也不会同步执行。jQuery在一个“线程”中启动动画，在另一个“线程”中设置
hiddenAway
类。因此动画被覆盖。要解决这个问题，只需增加一个延迟

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate({
                bottom: '0'
            })
            setTimeout(function() {
                $("#projList").addClass('hideAway');
            }, 300) //.addClass('hideAway');
        }

    });
});

**编辑：**

Ehsan的答案可能更合适，因此您不需要知道动画时间。他的答案是提供一个回调函数，jQuery将在动画完成时应用该函数。这是一个完整的功能：

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate(
                {
                    bottom: '0'
                },
                function() {
                    $("#projList").addClass('hideAway');
                }
            );
        }

    });

});

为此，可以使用animate的回调功能


$（文档）.ready（函数（）{
$（“#projs”）。单击（函数（）{
if（$（“#projList”）.hasClass（'hideway'））{
$（“#projList”）.removeClass（‘隐藏’）.animate({
底部：“25%”
});
} 
否则{
$（“#项目列表”）。设置动画({
底部：“0%。”
}，800，函数（）{
$（this.addClass（'hideway'）；
});
}
});
});
.hideway{
可见性：隐藏；
}
您可以通过实现以下功能来最小化代码：


$（文档）.ready（函数（）{
$（“#projs”）。单击（函数（）{
$（“#projList”）.slideToggle（）.css（“底部”、“25%”）。切换类（“隐藏”）；
});
});
.hideway{
显示：无；
}
它无法按预期工作，因为被链接在后面的函数在执行之前不会等待。它们都是一起执行的，不会等到上一个函数完成执行

您可以使用
.animate
中的回调函数


回调函数将在父函数完成其执行后执行



$（文档）.ready（函数（）{
$（“#projs”）。单击（函数（）{
if（$（“#projList”）.hasClass（'hideway'））{
$（“#projList”）.removeClass（‘隐藏’）.animate({
底部：“25%”
});
}否则{
$（“#projList”）.animate（{bottom:'0'}，function（）{
$（this.addClass（'hideway'）；
});
}
});
});
.hideway{
可见性：隐藏；
}

你能解释一下为什么它在第一种情况下有效吗（动画然后移除类…？@Ibu你必须在动画完成后添加类。所以第一个元素以同样缓慢的速度到达底部：0，并且在它被隐藏之后。