更改文字在元素寬度上即時發生

因此，我試圖製作一個「隨着時間的推移」文本更改器，每隔幾秒更改一個句子中的單詞，該代碼在文本實際更改時運行良好，寬度的句子會立即改變網站的平滑度。更改文字在元素寬度上即時發生

結構：

<div id="big"> 
    This is some <span id="change">text</span> 
</div>

字變化是#change。我已經使用寬度CSS過渡以及過渡性質嘗試：

margin-top: 18%; 
font-size: 70px; 
font-family: 'Slabia 27px', 'Droid Serif', Arial; 
>> text-align: center; 
text-transform: uppercase; 

>> -webkit-transition-property: width; 
>> -webkit-transition-duration: 2s; 
>> transition: width .8s ease;

也是我的jQuery（調用APP.init()）：

var APP = { 
    init: function() { 
    loopChangeWord = setInterval(function(){ 
     var $change = $('#change'); 
     var iteration = ['quick', 'efficiently', 'well', 'together']; 
     var current = $change.html(); 
     for (var i = 0; i < iteration.length; i++) { 
     if (iteration[i] == current) { 
      if (i+1 > iteration.length-1) var nw = iteration[0]; 
      else nw = iteration[i+1]; 
      $change.fadeOut(500, function(){ 
      $change.html(nw).fadeIn(500); 
      }); 
     } 
     } 
    }, 4000); 
    } 
};

到底**我m要求改變文本的平滑過渡的方式，我預計寬度改變會觸發CSS動畫，你錯了！

來源

2017-05-15 Jek

後@AlaaMh –

做樣的先生？ – Jek

你試過過渡'all'，而不是過渡'width'你的jQuery以及 –

我必須更改文本的值，該值位於您的<span id="change">text</span>中以匹配您的var iteration = ['quick', 'efficiently', 'well', 'together'];陣列的任一值。

這裏的工作演示：https://jsfiddle.net/5p36n34j/1/

希望這有助於！

來源

2017-05-15 07:11:50

我爲你高興！有時候這很簡單，但你需要像你一樣專注，好工作！ –

@AlaaMh謝謝隊友！ –

是不是所有的jsfiddle代碼都一樣？更改文本的字體大小，並再次出現問題，這正是我想解決的問題：P – Jek

下面是使用transition: all .8s ease;代替#change而不是transition: width .8s ease;代#big的示例。

var fontSize = 10; 
 
$('#big').click(function() { \t 
 
\t fontSize = fontSize * 2.2; 
 
    $('#change').css('fontSize', fontSize + 'px'); 
 
})

body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
#big { 
 
    margin-top: 18%; 
 
    font-family: 'Slabia 27px', 'Droid Serif', Arial; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    cursor: pointer; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: solid black 1px; 
 
    padding: 20px; 
 
} 
 
#change { 
 
    transition: all .8s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="big"> 
 
    Click on this <span id="change">text</span> 
 
</div>

來源

2017-05-15 07:14:46

更改文字在元素寬度上即時發生

回答

相關問題