slideToggle并同时设置动画(jQuery)

Question

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

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

我已经试过了。但动画运行得并不流畅；跳跃"；(.def不平滑(

$(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>

Answer 1

不使用jQuery的animate，而是可以将slideToggle与css动画结合起来：

JSFiddle

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

.element {
display: none;
background: black;
color: white;
animation: PaddingAni 5s ease-in-out forwards;
}
@keyframes PaddingAni {
from {
padding-top: 0;
}
to {
padding-top: 50px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<a class="def">
<img src="img.png">
Close
</a>
</div>