jQuery幻灯片切换

Question

我目前正在为与之合作的独立游戏开发团队建立网站。

现在，我正在编写Alpha注册页面，并且已经创建了需要使用slideToggle（）和fadeToggle（）方法的布局，但是在编辑器中忙了几个小时之后，我似乎无法找到解决方案我想要的行为。

当页面加载时，我希望表单容器处于向上滑动的位置，并且当用户单击div时，我希望表单容器向下动画。

我尝试将显示属性从隐藏设置为动画，也尝试在文档加载时隐藏元素，然后在单击时重新显示它，但是当我这样做时，我注意到一个奇怪的行为，因为div会向下滑动然后向上，这将导致用户不得不再次按下按钮才能查看注册表单。

下面的代码处理click事件，

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

这是我要隐藏并重新出现的div

<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>

我创建了一个jsfiddle来演示页面当前的呈现方式-http: //jsfiddle.net/alexmk92/54EUC/-任何指针都将不胜感激。

Answer 1

首先，我从html中删除了javascript代码，并向clickable元素添加了一个“ clickable”类：

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

然后，我使用slideDown和up创建了一个自定义javascript切换功能：

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

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

});

在css部分，我隐藏了'showForm'元素：

#showForm {display:none;}

这是小提琴： http : //jsfiddle.net/Karzin/54EUC/2/

Answer 2

如果在页面加载时需要隐藏表单。 用于表格容器

display : none

例如：

http://jsfiddle.net/54EUC/1/