寬度切換動畫 - 毛刺效應

Question

我試圖通過使用animate和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。