Input slideUp/slideDown issue

Question

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 slid

Answer 1

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

Answer 2

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