幅のトグルアニメーション - 不思議な効果

Question

私はとwidth: toggleを使って画像の隣にあるテキストにスライディングエフェクトを実装しようとしています（下のjsfiddleのように）。

私が遭遇している問題は、「スライディング」しているときに、単語間で不具合が発生することです。私の前提は、言葉が要素の中を動き回っているからです。

JSFiddle。

$('img').on('click', function(e) { 
 
    $('span').animate({ 
 
    width: 'toggle' 
 
    }, 400) 
 
});

span { 
 
    display: inline-block; 
 
    max-height: 20px; 
 
    width: auto; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://via.placeholder.com/50x50" alt=""> 
 
<span>Name Surname</span>

グリッチ効果を修正する方法はありますか？

Answer 1

これを修正する最も簡単な方法は、CSSコードにwhite-space: nowrapを設定してテキストの折り返しを防止することです。

$('img').on('click', function(e) { 
 
    $('span').animate({ 
 
    width: 'toggle' 
 
    }, 1200) 
 
});

span { 
 
    display: inline-block; 
 
    max-height: 20px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img src="http://via.placeholder.com/50x50" alt=""> 
 
<span>Name Surname</span>

Answer 2

これを試してください。

$('img').on('click', function(e) { 
 
\t $('span').animate({width: 'toggle'}, 400); 
 
});

span { 
 
    display: inline-block; 
 
    max-height: 20px; 
 
    width: auto; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<img src="http://via.placeholder.com/50x50" alt=""> 
 
<span>Name&nbsp;Surname</span>

はここで更新 Fiddleです。