Question

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

现在我正在编写alpha注册页面，我已经创建了需要使用slideToggle（）和fadeToggle（）方法的布局，但是在我的编辑器中进行了几个小时的操作后，我似乎无法理解解决我想要的行为。

当页面加载时，我希望表单容器处于其向上滑动的位置，当用户单击div时，我希望表单容器以动画形式显示。

我试图将display属性从hidden设置为block并且我还试图在文档加载时隐藏元素，然后在点击时重新显示它，但是当我这样做时，我注意到一个奇怪的行为作为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/ - 任何指针都会非常感激。

Answer 1

首先，我从html中删除了javascript代码，并在可点击元素中添加了一个“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/

JQuery slidetoggle

2 个答案: