1

I'd like to use .animate and slideToggle at the same time because if I do it like this, it doesn't run at the same time:

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

I've already tried this. But the animation doesn't run smooth and kid of "jumps" (not smooth for .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>
Dan
  • 29
  • 5

1 Answers1

2

Instead of using animate of jQuery, you can combine your slideToggle with css animation:

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>
HMZ
  • 2,949
  • 1
  • 19
  • 30
  • Looks really good but if you watch carefully it jumps at the end because of the padding animation. Do you have an idea how to solve this? – Dan Nov 25 '20 at 12:12
  • @Dan This is normal because the animation spans over 5 seconds. For a test, open the jsfiddle i added and change the animation time and the slide toggle to 2 seconds. No jumps. – HMZ Nov 25 '20 at 12:20
  • If you remove the image tag with the missing resource the problem should be resolved – Lapskaus Nov 25 '20 at 12:24