CODEWITHSUNDEEP
jquery
Доктор Скальпинг
Доктор Скальпинг

Reputation: 973

Animated text input in search box with jQuery

I want that when you click on the text box it has expanded in size. Here is the solution of this http://jsfiddle.net/62CDp/

This jQuery-code:

$(function() {
    $("#s").focus(function(){
        $(this).animate({ width:"250px"}, 'slow');
    }).blur(function(){
        $(this).animate({ width:"151px"}, 'slow');
    });
});

everything seems to be fine, but on my site (http://iamlex.ru/bookmarks/), when you click on the text box, followed by the movement of the text box moves and the button itself. Tell me, please, what could be the problem ..

demo

P.S. Sorry for my bad English.

Upvotes: 0

Views: 1510

Answers (3)

Jas
Jas

Reputation: 546

Add a CSS to the #s element to force display inline. This will fix the issue:

#s { display: inline!important;}

Upvotes: 1

OzrenTkalcecKrznaric
OzrenTkalcecKrznaric

Reputation: 5646

If you want simple solution, just wrap both inputs with <div style="float: left;">. That way it should work.

Upvotes: 0

Pete Scott
Pete Scott

Reputation: 1526

Your input is switching from display:inline to display:block, and then back again. The display:block is dropping the button to the next line, and the container grows, so the submit button moves. Then it switches back to inline and renders as you expect.

jQuery's animate() converts elements to block. Here's another question with an answer for an alternate animation: Animating inline elements with jQuery

Upvotes: 3

Related Questions