toggleSlide 문제 - 문자 절단/보이지 않는 텍스트

Question

나는 쇼 검색 입력 상자를 smootly하는 JQuery와 1.8.2과 toggleSlide 애니메이션을 사용하고 있지만, 크롬에 두 가지 문제가 - 그들 중 하나 내가 a jsfiddle

로 분리 한을

$('#hiddenBlock').slideToggle(500); 
$('#inputHiddenBlock').slideToggle(500); 
$('#but').slideToggle(500); 

크롬을 열어 this fiddle 버튼을 클릭하고 텍스트 상자에 텍스트를 쓰고 버튼을 두 번 클릭하십시오. 다시 표시하려면 두 번째를 숨기십시오. 텍스트는 이제 보이지 않으며 fe에서 새로 고침 될 때까지 그대로 있습니다. 한 개 더 편지 쓰기.

는

이 아마 또한 캔버스에 연결된 것 같다입니다 두 번째 문제,/표시 텍스트에 연결 - 그것은 반에서 'L'과 같은 컷 문자를 허용 .... 그 예에서

당신이 'L'을보고 ' t ':
'l' and 't' http://img171.imageshack.us/img171/5784/beztytuuvxq.png

Answer 1

텍스트 상자와 검색 버튼은 모두 slideToggle 일 필요는 없습니다. Div hiddenBlock이면 충분합니다.

TEST2

:이 당신의 cutted 텍스트를 해결 여부를 임시 변수에 입력 한 텍스트를 볼 넣어

// on dom ready hides your div 
$(document).ready(function(){ 
    $('#hiddenBlock').hide(); 
}); 

function toggleSearchWindow() { 
    $('#hiddenBlock').slideToggle("fast"); 
} 

$('input[type=button]').click(function() { 
    toggleSearchWindow(); 
});​ 

TEST

UPDATE :

나는 솔루션을 simplyfied

Answer 2

시도해주세요. #inputhiddenblock 및 #but CSS를하고 난 당신 jsfiddle 링크를 업데이트해야

$('#inputHiddenBlock').slideToggle(500); 
$('#but').slideToggle(500); 

Answer 3

를 제거에서

display:none; 

.

입력 텍스트 필드를 초기화하지 않았고 입력 텍스트 필드의 DOM로드에서 인라인으로 초기화하지 않았으므로 아무 것도 표시하지 않았습니다.

나는 그것을 주석했다.

$ ('# inputHiddenBlock'). slideToggle (500);