애니메이션 Javascript 표시/숨기기 버튼

나는 사이트를 만들고 헤더에 메일 아이콘이 있습니다. 아이콘을 클릭하면 사람들이 뉴스 레터에 가입 할 수 있도록 입력 필드와 제출 버튼이 나타납니다. display : none 및 display : inline을 사용하는 대신 너비를 사용하는 방법이 있습니까? 따라서 메일 아이콘을 클릭하면 입력 필드가 즉시 나타나기보다는 왼쪽에서 슬라이드 아웃되도록 애니메이션이 적용됩니까?애니메이션 Javascript 표시/숨기기 버튼

여기 ... 사용하여 자바 스크립트 코드 메신저의 jQuery를의 놀라운 세계에 오신 것을 환영합니다

<!--Show & Hide Script Start--> 
<script language="JavaScript"> 
function setVisibility(id1) { 
if(document.getElementById('bt1').value=='H'){ 
document.getElementById('bt1').value = 'S'; 
document.getElementById(id1).style.display = 'none'; 

}else{ 
document.getElementById('bt1').value = 'H'; 
document.getElementById(id1).style.display = 'inline'; 

} 
} 
</script> 
<!--Show & Hide Script End-->

출처

2014-07-11 user3830099

fadeIn() 및 fadeOut() f가있는 jQuery를 사용하십시오. . – AlienWebguy

코드는 oldschoooooool입니다. D 현대 자바 스크립트를 읽습니다. 'language = "Javascript"는 당신의 출처가 지난 세기에서 나온 것처럼 보입니다. – Christoph

나는 또한 jQuery를 사용하여 투표함으로써 당신의 삶을 편하게 만듭니다. – BuddhistBeast

는 <head></head>이 포함 : 당신이 원하는 경우

function setVisibility(id1) { 
    if($('#bt1').val() == 'H'){ 
    $('#bt1').val('S'); 
    $('#' + id1).fadeOut(); 
    } 
    else{ 
    $('#bt1').val('H'); 
    $('#' + id1).fadeIn(); 
    } 
}

, 당신도 한 단계 더 걸릴 수와 클릭 이벤트를 설정 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

은이에 기능을 재 작업 또한 jQuery에서 ...

$(function(){ //this part of the code wait until the DOM has loaded to execute 
    $('[ID or Class selector for the button]').click(function(){ 
    setVisibility([string identifier for your element to hide/show]); 
    }); 
});

출처

2014-07-11 16:04:22 JRulle

애니메이션 Javascript 표시/숨기기 버튼

답변

관련 문제