Input slideUp/slideDown issue

问题:

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.

回答1:

Error occurs when height of the input comes 0. You should change your method. Use css position with masking animate method:

Here is demo link. You'll inspect there will be no bug with this method.

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; } ​

回答2:

It seems like a bug in chrome (not jQuery). It works fine in ff.

Its something related with font-size , I guess. Chrome does not loses font-size but if you set again, it works.

$(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'));                
        });
    });
});​

Demo

EDIT:

I see that above hack works for one time only. If you slide up/down again, it fails.

Here's a better hack.

.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');     
        });
    });
});​

Demo