jQuery配列からの入力フィールド値の滑らかなトランジション/アニメーション

Question

お世話になりました。

私はテキストベースの入力フィールドとボタンを持っています。私は、ボタンのクリックでテキストフィールドの値を変更し、jQueryを使用してループ上で複数の値を循環させることができました。

しかし、私は変化する値の間のスムーズな遷移を作成しようとしていますが、現時点では瞬時に変化しています。彼らがフェードイン/アウトすることができたなら、それは超だろう。

しかし、テキストフィールドの内容が何らかの形で下向きに変化し、新しい値から最後の上に移動すると、が完全になります。

私はHTMLとCSSに慣れていますが、JavaScript/jQueryに関する基本知識がありますので、誰かが正しい方向に私を指すことができる、または私が探しているものが実行可能かどうかを少なくとも教えてください私はとても感謝しています！

以下のコードを追加します。また、ここで私は現在で働いているかを確認するためのコードが言ったのcodepenています：ここで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のCODE

$(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>