I am facing an issue where the callback function fires immediately, disregarding the linear ease type and defaulting to the swing ease in CSS transitions. Is there a way to ensure that the animate function works correctly with the transition? The reason for needing the transition is because animating the div back to its original width leaves white space due to multiple divs, and jQuery animations do not synchronize in terms of speed/time like transitions do.
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>