1

Seems like jQuery removes the value of a input fields that has been slided up and then afterwards down. Not quite sure if it's the placeholder who does it but the built in slideUp/Down seems to bug the input field.

Here is a example: http://jsfiddle.net/k3Bc2/

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').slideUp(1000);
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').slideDown(1000);
    });
});

If you enter a value in the input field and click the slideUp button and wait till it's slided up and then click the slideDown you will see the value of the input field is missing.

Does anyone know a workaround to get a slideUp/slideDown working on the example linked?
Using google chrome if that gives an idea of why.

4

2 に答える 2

2

入力の高さが0になるとエラーが発生します。メソッドを変更する必要があります。マスキングアニメーションメソッドでcss位置を使用します。

こちらがデモリンクです。この方法にバグがないことを確認します。

jQuery：

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').stop().animate({'top':'200px'},400);
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').stop().animate({'top':'0px'},400);
    });
});​

html：

<div id="mask">
   <input id="motion" type="text" value="" placeholder="Enter some text.." />
</div>
<input type="button" value="slideUp" id="slideUp" />
<input type="button" value="slideDown" id="slideDown" />​

css：

#mask { position:relative; 160px; height:25px; overflow:hidden; top:0; left:0; }
#motion { position:absolute; top:0; left:0; }
input { position:relative; } ​
于 2012-07-24T09:14:20.257 に答える
1

クロムのバグのようです（jQueryではありません）。ffで問題なく動作します。

に関連するものだfont-sizeと思います。Chrome は負けませんがfont-size、再度設定すると動作します。

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').slideUp(1000);
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').slideDown(1000,function(){ 
             $(this).css('font-size',$(this).css('font-size'));                
        });
    });
});​

デモ

編集：

上記のハックが一度だけ機能することがわかりました。もう一度上下にスライドすると失敗します。

これがより良いハックです。

.text{ 
    font-size:13px; 
}​

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').slideUp(1000,function(){
               $(this).removeClass('text');        
        });
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').slideDown(1000,function(){    
            $(this).addClass('text');     
        });
    });
});​

デモ

于 2012-07-24T09:35:27.940 に答える