How to remove whitespace in horizontally scrolling text on mouseleave?

Question

I have this code that when the mouse leaves the span .ellipsis class is added and the text returns to the beginning, that's fine. The problem with this is that the .ellipsis class when added leaves a white space that I don't want.

I'm looking for the .ellipsis class to be added after the text animation ends. This is the result (or something similar) is what I need.

// for stuff that scrolls left on hover
$(".text").mouseenter(function() {
    $(this).removeClass("ellipsis");
    var maxscroll = $(this).width();
    var speed = maxscroll * 15;
    $(this).animate({
        scrollLeft: maxscroll
    }, speed, "linear");
});

$(".text").mouseleave(function() {
    $(this).addClass("ellipsis");
    $(this).stop();
    $(this).animate({
        scrollLeft: 0
    }, 'slow');
});

.container {
  display: flex;
  flex-direction: column;
  width: 320px;
  background: silver;
}
.text {
  margin: 5px;
  border:1px solid;
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
}
.ellipsis {
  text-overflow: ellipsis;
}

<div class="container">
  <div class="text">Lorem Ipsum</div>
  <div class="text ellipsis">
    <span>Lorem Ipsum is simply dummy text
      of the printing</span>
  </div>
  <div class="text ellipsis">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

Answer 1

Simply specify a callback for .animate():

$(this).animate(/* ... */, function() {
  $(this).addClass("ellipsis");
});

Try it:

// for stuff that scrolls left on hover
$(".text").mouseenter(function() {
    $(this).removeClass("ellipsis");
    var maxscroll = $(this).width();
    var speed = maxscroll * 15;
    $(this).animate({
        scrollLeft: maxscroll
    }, speed, "linear");
});

$(".text").mouseleave(function() {
    $(this).stop();
    $(this).animate({
      scrollLeft: 0
    }, "slow",
    function() {
       $(this).addClass("ellipsis");
    });
});

.container {
  display: flex;
  flex-direction: column;
  width: 320px;
  background: silver;
}
.text {
  margin: 5px;
  border:1px solid;
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
}
.ellipsis {
  text-overflow: ellipsis;
}

<div class="container">
  <div class="text">Lorem Ipsum</div>
  <div class="text ellipsis">
    <span>Lorem Ipsum is simply dummy text
      of the printing</span>
  </div>
  <div class="text ellipsis">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>