jQuery數組的輸入字段值的平滑過渡/動畫

Question

嘿，感謝您抽出寶貴的時間來協助您！

我有一個基於文本的輸入字段和一個按鈕。 我已經設法通過單擊按鈕來更改文本字段的值，並使用jQuery在循環中循環瀏覽多個值。

但是，我正在嘗試在變化的值之間創建更平滑的過渡，因為目前它們是瞬時變化的。 如果他們能夠淡入/淡出，那就太好了。

但是，如果文本字段的內容可以以某種方式向下轉換，而新值然后從最后一個值開始轉換，那將是完美的 ！

我具有HTML和CSS的能力，但是具有JavaScript / jQuery的基本知識，所以如果有人可以向我指出正確的方向，或者至少告訴我我正在尋找的東西是否可行，我會非常感謝！

我將在下面添加代碼。 另外，下面是上述代碼的代碼庫，以查看我目前的工作情況： http ://codepen.io/anon/pen/mWZWQy

HTML代碼

<form class="introduction_container">
    <input class="input" type="text" readonly value="Values will go here..."/>
    <input class="button" type="button" value="Click"/>
</form>

JQUERY代碼

$(document).ready(function() {
    var content = ["Hi there, I'm a value.", "Oh, hey, me too!", "When I grow up, I'm gonna be a placeholder."];
    var x = 0;

    $(".button").click(function() {
        $(".input").val(content[x]);
        x = (x + 1) % content.length;
    });
});

Answer 1

這是一個具有多次點擊和疊加元素的示例：

 var content = ["Hi there, I'm a value.", "Oh, hey, me too!", "When I grow up, I'm gonna be a placeholder."]; var x = 0; $(".button").click(function() { var input = $('.input'); var input2 = $('<input />', { css: { position : 'absolute', top : input.position().top, left : input.position().left, height : input.height(), width : input.width() } }); input.val(content[x]).parent().append(input2); input2.fadeOut('slow'); x++; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <form class="introduction_container"> <input class="input" type="text" readonly value="Values will go here..."/> <input class="button" type="button" value="Click"/> </form>