Question

我的联系表单隐藏了一个负边距顶部，因此当访问者点击“联系人”时，它会显示div。

<script type="text/javascript">$("#revealContact").click(function(){
     $("#contact").animate({
          marginTop: "+=620px"
    }, 1000);
});</script>

您可以在此处观看： http://www.brianrhea.com/index_contact.php - 点击右上角的联系人链接

我的问题是，一旦提交表单，它就会继承-620边距，并且成功（或错误）提示是不可见的。

我正在遇到其他一些交叉兼容性问题以及边距，所以我甚至不确定这是解决这个问题的最佳方法。显然，如果我可以将div作为显示开始是很好的：隐藏然后将其动画显示为可见，但我无法做到。

任何输入都会受到赞赏，或者提供有关如何在表单提交后保存边距的建议，或建议更好的方法来实现此隐藏/显示。

谢谢，布赖恩

Answer 1

多次单击联系人按钮，您会遇到一个令人讨厌的问题。我会改变click函数。只是为了让它变得更酷（我不记得了，但是一个更好地完成这项工作的功能）：

$('#revealContact').click(function()
{
  if ($('#contact').css('marginTop') != '620px')
  {
    $("#contact").stop().animate({marginTop: '620px'}, 1000);
  } else {
    $("#contact").stop().animate({marginTop: '0px'}, 1000);
  }
});

我建议不要允许提交，并通过AJAX提交（而不是使用空白action属性。这是更多跨浏览器，因为没有JS的人甚至无法使用该表单。我给该表单id。让我们称之为mr_form。

提交mr_form后，您实际上可以强制它不要在没有页面刷新的情况下执行错误：

$('#mr_form').submit(function()
{
  return false;

  $.post('your_contact_file.php', $('#mr_form').serialize(), function(response)
  {
    if (response == 'blah')
    {
      /* Do blah */
    } else {
      /* Blah */
    }
  });
});

对于消息，我只需将z-index设置为-99或display设置为none。这使得它们不可见，或者使其浮动在所有其他内容之下（设置内容的z-index）。然后，根据您的回复消息，您可以淡入/淡出或滑动所需的消息。

祝你好运（只是一个FYI，此代码未经测试，可能无效。告诉我它是否已经破产，我会修复它。）

Answer 2

尝试一些内置动画，他们通常可以做到这一点。这里的关键是绝对定位表单，并将其隐藏起来。

$("#revealContact").click(function(){
     $("#contact").slideDown();
});

Answer 3

我得到了一些很好的建议，并想分享我的解决方案，以防其他人遇到这个问题。

可在此处查看实时版本：http://www.brianrhea.com - 点击项目申请

我首先将两个单独的div放在我网站的内容之上。第一个div包含“感谢提交”内容。另一个div包含联系表单本身（div id = contactNone）。这两个div在样式表中都给出了display：none。

我的号召性用语按钮是一个div，如下所示：

<div id="projectRequestHome">
<a href="#">Request a Project</a>
</div>

这引用了以下js

 $("#revealContact").click(function(){
   $("#contactNone").slideDown('slow');
 });

我有一个关闭按钮，引用以下

 $("#hideContact").click(function(){
   $("#contactNone").slideUp('slow');
 });

对于表单，我使用了一个非常好的基于AJAX的表单：www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

我对结果非常满意，并对我在这里收到的方向表示感谢。

希望其他人觉得这很有用！

jQuery .animate显示隐藏在div中的联系人表单，头部上方有负边距

3 个答案: