Javascript 滑动切换并同时设置动画（jQuery）

我想同时使用.animate和slideToggle，因为如果我这样做，它不会同时运行：

$(element).slideToggle(5000);
$(element).animate({
    paddingTop: '50px'
}, 5000);

我已经试过了。但是动画运行不平滑，并且“跳跃”（对于.def不平滑）

$（元素）.slideToggle（5000）；
$（元素）。设置动画({
paddingTop:'50px'，
高度：“切换”
}, 5000);
/*显示为：开始时无*/
abc

接近

您可以将

幻灯片切换

与css动画结合起来，而不是使用jQuery的

动画

：

$（函数（）{
$（“.element”）.slideToggle（5000）；
/*$（“.element”）.animate({
paddingTop:'50px'，
高度：“切换”
}, 5000); */
})

.element{
显示：无；
背景：黑色；
颜色：白色；
动画：帕丁加尼5秒轻松进退向前；
}
@关键帧PaddingAni{
从{
填充顶部：0；
}
到{
填充顶部：50px；
}
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

接近

看起来确实不错，但如果仔细观察，它会因为填充动画而在末尾跳起来。你知道如何解决这个问题吗？@Dan这是正常的，因为动画跨越5秒。为了进行测试，打开我添加的JSFIDLE并将动画时间和幻灯片切换更改为2秒。没有跳转。如果删除缺少资源的图像标记，问题应该得到解决

$(element).slideToggle(5000);
$(element).animate({
    paddingTop: '50px',
    height: 'toggle'
}, 5000);


<div class="element"> /* is display: none at start */
    <p>abc</p>
    <a class="def">
        <img src="img.png">
        Close
    </a>
</div>