0

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

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

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

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

4

2 回答 2

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/

于 2013-06-20T03:34:31.677 回答
0

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

display : none

例如：

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

于 2013-06-20T02:45:57.423 回答