同时使用 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

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

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>

同时使用 slideToggle 和动画 (jQuery)

slideToggle and animate at the same time (jQuery)

javascript

jquery

animation

toggle

jquery-animate