CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animatetoggle
Dan
Dan

Reputation: 29

slideToggle and animate at the same time (jQuery)

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>

Upvotes: 1

Views: 455

Answers (1)

HMZ
HMZ

Reputation: 3127

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>

Upvotes: 2

Related Questions