文本自动移动以适应动画相邻文本 (jquery）:如何平滑

Text automatically moves to accommodate animated adjacent text (jquery): How to smoothen?

本文关键字：文本 jquery 平滑 何平滑 移动 动画      更新时间：2023-09-26

我正在使用jquery循环浏览单词。当然，单词大小会发生变化，导致旁边的非动画文本移位。有没有办法平滑这种位置的转变？

我有什么：http://jsfiddle.net/tWm36/121/

我要实现的目标：https://gumroad.com/

看看文本如何平滑地移开以适应正在循环的单词，而不是一个突然的移动？

<div>
<span id="changerificwordspanid">awesome</span>
 <span>This is so</span>


(function(){
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;
setInterval(function(){
    $('#changerificwordspanid').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn();
    });
}, 2000);
})();

试试这样的东西！ 

<div> 
   <div id='words' style='visibility:hidden'>
       <span>awesome</span>
       <span>incredible</span>
       <span>cool</span>
       <span>fantastic</span>
   </div>
   <span id="changerificwordspanid" style='overflow-x:hidden'>awesome</span>
   <span>This is so</span>
</div>

我创建了包含文本的隐藏跨度。这允许您获取浏览器计算的宽度。当我们在文本中淡入淡出时，我们将对显示范围的宽度进行动画处理。在显示的范围上设置overflow-x:hidden很重要，因为它允许宽度小于文本的宽度。使用 fadeOut（） 不太正确，因为我们不想在任何时候设置 display：none，因为这会导致生涩的行为。所以只需像这样使用 animate（）：

(function () {
    var words = $('#words span').map(function(i, obj) { return { width: $(obj).width() + 'px', text: $(obj).html() } });
    var i = 0;
    setInterval(function () {
        $('#changerificwordspanid').animate({ opacity: 0.0, width: words[i].width }, 
                                            400, function () {
            word = words[i = (i + 1) % words.length];
            $(this).html(word.text);
            $(this).animate({ opacity: 1.0, width: word.width });
        });
    }, 2000);
})();
相关文章：