Jquery - easing transition on mouseenter / mouseleave

beginner trying something in Jquery which I think is simple??? been trying for couple of hours with all sorts of things (fadeIn, animate, toggleslide, easing etc) but can't get this to work..

Basically have a value and when you hover over it, the value changes, this is what I got working just fine. But currently the transition is very abrupt. What I want to achieve is some easing to create a smoother transition?

Any tips?

http://jsfiddle.net/w7q0bug9/

$(function() {

$('#test').mouseenter(function() {
    $('#test').text('hallo');
 });

$('#test').mouseleave(function() {
    $('#test').text('...');
 });

});

I simplified my issue for this question, I'm using this inside a webflow website to show a text value somewhere when a svg is selected, this is the code where I want to apply this eventually

$('.SVGimage').mouseenter(function() {
    $('.TextToChange').text( $(this).attr('TextValueFromSVG'));
 });

got help from a friend:

        $(".SVGimage").mouseenter(function () {
      const textValue = $(this).attr("TextValueFromSVG");
      $(".TextToChange")
        .fadeOut(function () {
          $(this).text(textValue);
        })
        .fadeIn();
    });