0

したがって、純粋なjQueryだけでこれをテストしましたが、正常に動作します。これは、ブートストラップ CSS と関係があります。単純な幅のアニメーションを実行しようとしていますが、動作しますが、アニメーションは「ジャンプ」します。フィドルを見て、私が話していることを確認してください。

http://jsfiddle.net/qVz9M/2/

ブートストラップ CSS がなくても正常に動作することがわかります。

http://jsfiddle.net/qVz9M/4/

HTML:

<input class="input-small find" type="text" >

JavaScript:

$(".find").focus(function () {
    $(this).animate({
        width: "200px"
    }, 500);
}).blur(function () {
    $(this).stop().animate({
        width: "90px"
    }, 500);
});

編集：

したがって、PADDING が問題のようです。他の誰かがこれを経験していますか？

Edit2: これは、1.9.1 の修正リリースを伴う jQuery のバグです。

4

1 に答える 1

0

好奇心から、CSS アニメーションを使用すると、アニメーションがスムーズになります: http://jsfiddle.net/panchroma/yYYJE/ ?

CSS 

input.find{
width:90px;
transition: all .5s;
-moz-transition:all .5s; /* Firefox 4 */; 
-webkit-transition: all .5s; /* Safari and Chrome */
-o-transition: all .5s; /* Opera */
}
input.find:focus{
width:200px; 

}
于 2013-01-25T13:14:45.150 に答える