jQuery 滑动切换答案

【问题标题】：JQuery slidetogglejQuery 滑动切换
【发布时间】：2013-06-20 02:20:55
【问题描述】：

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

现在我正在编写 alpha 注册页面，并创建了需要使用 slideToggle() 和 fadeToggle() 方法的布局，但是在我的编辑器中闲逛了几个小时后，我似乎无法理解我想要的行为的解决方案。

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

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

下面的代码处理点击事件，

    <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/ - 任何指针将不胜感激。

【问题讨论】：

标签： javascript jquery slidetoggle

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

display : none

例如：

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

【讨论】：