同时滑动切换和动画（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

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

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>