在jQuery搜索框中輸入動畫文本

我希望當你點擊文本框時，它的大小已經擴大。下面是解決這個http://jsfiddle.net/62CDp/在jQuery搜索框中輸入動畫文本

這個jQuery代碼：

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

似乎一切都很好，但在我的網站（http://iamlex.ru/bookmarks/），當你點擊文本框，其次是運動文本框移動，按鈕本身。告訴我，請，可能是什麼問題..

demo

附：對不起，我的英語不好。

來源

2013-07-14 Доктор Скальпинг

它的問題與分配給搜索框和按鈕的寬度。 – ssilas777

將CSS添加到#s元素以強制內聯顯示。這將解決問題：

#s { display: inline!important;}

來源

2013-07-14 18:50:53 Jas

事實證明，這很容易，它的工作原理，謝謝！ –

您的輸入正在從顯示切換：內嵌顯示：塊，然後再回來。顯示：塊將按鈕放到下一行，並且容器增長，所以提交按鈕移動。然後它切換回內聯並按照您的預期呈現。

jQuery的animate（）將元素轉換爲塊。下面是另一個替代動畫的答案問題：Animating inline elements with jQuery

來源

2013-07-14 18:20:47

現在一切都變得清晰了，但我決定改變顯示器的價值以及如何讓事情發揮作用。 –

如果您想要簡單的解決方案，只需將兩個輸入包裝爲<div style="float: left;">即可。這樣它應該可以工作。

來源

2013-07-14 18:31:13 OzrenTkalcecKrznaric

在jQuery搜索框中輸入動畫文本

回答

相關問題