同时滑动切换和动画（jQuery）

Posted 2023-05-08

【中文标题】同时滑动切换和动画（jQuery）

【英文标题】：slideToggle and animate at the same time (jQuery)

【发布时间】：2021-03-08 05:57:54

【问题描述】：

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

【参考方案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>

【讨论】：

看起来确实不错，但如果你仔细观察，它会因为填充动画而在最后跳跃。你知道如何解决这个问题吗？

@Dan 这很正常，因为动画跨越 5 秒。为了测试，打开我添加的 jsfiddle 并将动画时间和滑动切换更改为 2 秒。没有跳跃。

如果您删除缺少资源的图像标签，问题应该得到解决