How to smooth this search bar animation

Question

I tried to modify the code taken from herefor my usage need:

CSS:

.search-bar{ width: 200px; display: none; }
.searchbox { display: inline;}
.trigger { display: inline}

HTML:

<div class="search-bar">
    <input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">           
</div>
<button class="trigger">search</button>

JS:

$(document).ready(function() {
    $('.trigger').click(function() {
        if ($("search-bar").is(':visible')) {
            $('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
        } else {
            $('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
        }
    });
});

It works as expected but the animation isn't smooth. How to make the animation flow smoothly.

JSFiddle

Thank you,

That's not really something that's commonly animated. You could fade out and in, is hat what you're looking for? — Seano666, Apr 29 '14 at 04:50
No, I do not want fade-in fade-out. I see many of this on the web. I want my website have something like them. — ket, Apr 29 '14 at 05:22

score 0 · Answer 1 · answered Apr 29 '14 at 04:50

try something like this, FIDDLE

$(document).ready(function () {
    $('.trigger').click(function () {
        if ($(".search-bar").is(':visible')) {
            $('.search-bar').fadeOut();
        } else {
            $('.search-bar').fadeIn();
        }
    });
});

simplified version

$(document).ready(function () {
    $('.trigger').click(function () {
        $('.search-bar').fadeToggle("slow");
    });
});

score 0 · Answer 2 · answered Apr 29 '14 at 04:51

set animation time also see updated fiddle

  $(document).ready(function() {
        $('.trigger').click(function() {
            if ($("search-bar").is(':visible')) {
                $('.search-bar').animate({width: 'toggle'},500);//here set animation duration
            } else {
                $('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
            }
        });
    });

reference animation()

score 0 · Answer 3 · edited May 23 '17 at 12:20

You just need to add the width to each expandable div.

To explain:

jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.

More detailed information please see this link:

jQuery slideDown is not smooth

score 0 · Accepted Answer · answered Apr 29 '14 at 07:03

Someone has helped me out. The feature I want is here: http://jsfiddle.net/mw7yK/12/

CSS:

.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}

HTML:

<div class="search-bar">
    <input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />           
</div>
<button class="trigger">search</button>

JS:

$(document).ready(function() {
    $('.trigger').click(function() {
        $('.searchbox').animate({width: 'toggle'}, 1000);
    });
});

How to smooth this search bar animation

4 Answers4