입력 slideUp/slideDown 문제

Question

보인다. 자리 표시자인 경우에는 잘 모르지만 slideUp/Down에 내장 된 입력란은 버그로 보입니다. 입력 필드에 값을 입력하고 값을 보게 될 slideDown을 클릭 한 후 slideUp 버튼을 클릭하고 위로 슬라이드 이동 것까지 기다린 경우 http://jsfiddle.net/k3Bc2/

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

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

: 여기

은 예입니다 입력 필드가 누락되었습니다.

사람은 slideUp/slideDown는 링크 된 예 작업을 얻을 수있는 해결 방법을 알고 있나요? 그 이유의 아이디어를 제공하는 경우 구글은 크롬 사용
. 입력의 높이가 당신은 당신의 방법을 변경해야합니다 0 때

Answer 1

오류가 발생합니다. 마스킹 애니메이션 방식으로 CSS 위치를 사용

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 :

CSS는

<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" />​ 

:

#mask { position:relative; 160px; height:25px; overflow:hidden; top:0; left:0; } 
#motion { position:absolute; top:0; left:0; } 
input { position:relative; } ​ 

Answer 2

그것은 버그 것 같아 내가 n 크롬 (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'));     
     }); 
    }); 
});​ 

Demo

편집 : 내가 볼

이 해킹 한 번만 작동 이상. 위/아래로 다시 슬라이드하면 실패합니다.

여기에 더 나은 해킹.

.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