CODEWITHSUNDEEP
jquerycssjquery-animatecss-transitions
Pete
Pete

Reputation: 58432

Why does animate callback function fire immediately if there is a css transition applied?

As I am using a transition in the css, the code fires the callback function immediately and ignores the linear ease type and uses the default swing ease.

Why does this occur and is there a way to get the animate function to work properly with the transition? I need the transition because if I try to animate the div back to its original width, it creates a bit of white space due to there being multiple divs and the jQuery animations don't run at the same speed/time where as the transition does.

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').removeAttr('style');
});
.test {
  width: 120px;
  padding: 20px;
  background: grey;
  transition: width 0.3s ease-in-out;
}

.content {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

Upvotes: 2

Views: 22

Answers (1)

Temani Afif
Temani Afif

Reputation: 272866

Remove the transition when running the animate() function to avoid this bad effect. The animate() will change the width values and those changes will get the transition effect.

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').removeClass('transition').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').addClass('transition').removeAttr('style');
});
.test {
  width: 120px;
  padding: 20px;
  background: grey;
}
.transition {
  transition: width 0.3s ease-in-out;
}

.content {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

To better illustrate the issue, increase the value of the transition and you will notice that animate() will do nothing:

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').removeAttr('style');
});
.test {
  width: 120px;
  padding: 20px;
  background: grey;
  transition: width 30s ease-in-out;
}

.content {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

Upvotes: 2

Related Questions