Smooth transitions/animations of input field values from jQuery arrays

Question

Hey, thanks for the taking the time to assist!

I have a text-based input field and a button. I've managed to make the value of the text field change at the click of the button, and cycle through multiple values on a loop using jQuery.

However, I'm looking to try and create a smoother transition between the changing values, as at present, they change instantaneously. If they were able to fade-in/out, that would be super.

But, if the text field content could somehow transition downwards, with the new value then transitioning from above the last, that would be perfect !

I'm competent with HTML and CSS, but have a basic knowledge of JavaScript/jQuery, so if somebody could point me in the right direction, or at least tell me whether or not what I'm looking for is doable, I'd be very grateful!

I'll include the code below. Also, here's a codepen of said code to see what I have working at present: http://codepen.io/anon/pen/mWZWQy

HTML CODE

<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

Here is an example with multiple clicks and overlay element:

 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>