JQuery 슬라이더

저는 현재 일하고있는 인디 게임 개발 팀을위한 웹 사이트를 만들고 있습니다.JQuery 슬라이더

지금 알파 가입 페이지를 작성 중이며 slideToggle() 및 fadeToggle() 메소드를 사용해야하는 레이아웃을 만들었지 만, 몇 시간 후에 편집장에서 볼 수없는 것처럼 보입니다. 내가 원하는 행동에 대한 해결책을 짐작할 수 있습니다.

페이지가로드 될 때 양식 컨테이너를 밀어 올린 상태에서 사용자가 div를 클릭하면 양식 컨테이너가 아래로 움직이기를 원합니다.

표시 속성을 숨김에서 블록으로 애니메이션하려고했는데 문서가로드 된 다음 클릭하면 다시 표시 될 때 요소를 숨기려고 시도했습니다. 그러나 그 일을했을 때 나는 이상한 동작을 div가 아래로 슬라이드 한 다음 위로 올라가면 사용자가 가입 양식을보기 위해 버튼을 다시 눌러야합니다.

코드는 아래의 클릭 이벤트를 처리

<a href="#" > 
     <div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div> 
    </a>

그리고 이것은 내가 보여주는 jsfiddle을 만든 숨겨진

<div id="formContainer" class="form container"> 
     <div id="showForm" class="outer"> 
      <div class="inner"> 
       <form method="post" action="verify.php"> 
        <table> 
         <tr> 
          <td class="intro"> 
           <h1 class="header-orange">Liberico Alpha Application</h1> 
           <p class="body-text">So you think you have what it takes to brave the battlefield? 
           </p> 
          </td> 
         </tr> 

        </table> 
       </form> 
      </div> 
     </div> 
</div>

를 다시 표시 할 할 DIV 얼마나 내 현재 페이지 렌더링 - http://jsfiddle.net/alexmk92/54EUC/ - 모든 포인터가 크게 감사하겠습니다.

출처

2013-06-20 Alex

첫째, 나 HTML에서 자바 스크립트 코드를 제거하고, 클릭 가능한 요소에 "클릭"클래스가 추가

<a class="clickable" href="#" > 
      <div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div> 
     </a>

그리고 나서, slideDown 이상으로 javascript 토글 기능을 만들었습니다 :

: 여기

#showForm {display:none;}

은 바이올린이다하는 CSS 부분

$('.clickable').click(function(){  
    var showFormObj = $('#showForm'); 

    if(showFormObj.hasClass('active')){ 
     showFormObj.removeClass('active'); 
     showFormObj.slideUp(); 
    }else{ 
     showFormObj.addClass('active'); 
     showFormObj.slideDown(); 
    } 

});

3,691,363,210는 난 'showForm'요소를 숨겨

출처

2013-06-20 03:34:31