我有一个句子,我在一个单词中淡入并用数组中的另一个单词替换它.然而,由于所有单词的长度都不同,所以句子宽度突然改变并且导致波动过渡.
如何设置宽度变化的动画?我尝试在css中添加一个到句子容器的转换,但是没有用.我将转换应用为1.5s all linear,因此无论何时发生变化,都应该为宽度以及其他所有内容设置动画.有任何想法吗?
$(function() {
var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
var used = ['dynamic'];
var greeting = $('#what');
var item;
function hey() {
item = hello[Math.floor(Math.random() * hello.length)];
if (hello.length != used.length) {
while (jQuery.inArray(item, used) != -1) {
item = hello[Math.floor(Math.random() * hello.length)];
}
used.push(item);
} else {
used.length = 0;
item = hello[Math.floor(Math.random() * hello.length)];
used.push(item);
}
greeting.html(item);
greeting.animate({
"opacity": "1"
}, 1500);
}
window.setInterval(function() {
greeting.animate({
"opacity": "0"
}, 1500);
setTimeout(hey, …Run Code Online (Sandbox Code Playgroud)