How to make input box show up from right to left? - css

Question

I have the following HTML:
<div class="menus">
<di class="menu-option">
Weather
</di>
<di class="menu-option">
Travel
</di>
<di class="menu-option">
<input class="search-input" />
<span class="search-btn">Search</span>
</di>
</div>
CSS
.menus {
float:right;
}
.menu-option {
display: inline-block;
border-left: 1px solid black;
padding: 0 15px;
}
.search-input {
display: none;
}
Javascript:
$('.search-btn').click(function(e) {
$('.search-input').show();
});
At this moment, I able to show the search box from hidden when clicking the Search text. How can I make the search box show up by moving from right to left and pushing other text to the left side, instead of showing the search box all of a sudden.
This is the JSFIDDLE example:
https://jsfiddle.net/1btm224h/5/
Thanks!

Answer 1

You can go with:
$('.search-btn').click(function(e) {
$('.search-input').show("slow");
});
Or you can go with:
$('.search-btn').click(function(e) {
$('.search-input').show(3000);
});
From jQuery official: "The default duration is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively."
So you only need to add animation duration, which is built into the .show() by default.

Answer 2

look, I don't sure if you need this.
$('.search-btn').click(function(e) {
$('.search-input').addClass('open');
$('.search-input').FadeIn(300);
$('.menus').FadeIn(300);
$('.menus').addClass('mover');
});
.search-input.open{
display:block;
float:right;
}
.menus.mover{
float:left;
}