1

我正在处理带有一些 jquery 的 php 表单，特别是对于错误和感谢消息。jquery 部分可以在此处查看：http:
//jsbin.com/ohuya3
表单的工作示例可在此处获得：
http
://cozyphant-living.com/php/formular4.htm您必须点击“Formular senden " 按钮以查看消息面板。
我想让谢谢和/或错误面板滑出并让文本淡入。脚本正在接受我的代码（因为它仍在工作）但实际上我看不到文本实际上淡入。我已经看到文本褪色的滑动面板示例。所以这似乎是我做的一种错误的编码。
任何帮助表示赞赏。

4

2 回答 2

1

.show()在您的情况下，使用持续时间以获得所需的同时滑动+淡入淡出效果：

$("#formResponse").html(data).show('slow')

你可以在这里测试一下效果。

对于您的代码，您需要margin: 0 auto;从#formResponse对象中删除，从而导致上述动画代码出现问题。您还可以以更容易维护的方式序列化您的表单，总体而言是这样的：

$("#contact_form").submit(function() {
  var arr = $(this).serializeArray();         //serialize form, based on names
  arr.push({ name: 'senden', value: 'yes' }); //add the senden variable
  $.post('mail.php', arr, function(data) {    //pass that object as your data
    $("#formResponse").hide().html(data).show('slow'); //hide before slide!
  }, 'text');
  return false;
});
于 2010-10-04T10:53:52.897 回答
1

问题是您的#formResponse容器一开始并没有隐藏。一旦响应文本插入其中，它将直接显示，而不是淡入。您需要声明display: none;隐藏它：

<div class="contact-form-text" id="formResponse" style="display: none;"></div>

然后 AJAX 回调函数会将文本插入其中，然后将其淡入。

更新：如果您想要幻灯片和淡入，那么您将需要使用额外的响应容器，因为一旦它滑出，它就已经可见并且不能从 100% 可见性淡入。所以你想要的是这样的：

<div id="formResponse_container" style="display:none;"> <!-- extra wrapper -->
    <div id="formResponse" class="contact-form-text" style="display:none;"></div>
</div>

然后在 jQuery 脚本中，而不是

$("#formResponse").hide().html(data).show('slow'); //hide before slide!

你将会拥有

$("#formResponse_container").slideDown("slow", function() {
    $("#formResponse").html(data).fadeIn("slow");
});

它的作用是，它会先从外部容器滑下，一旦动画完成，它就会在内部容器中淡入淡出。

活生生的例子

希望这可以帮助。

于 2010-10-04T11:15:57.670 回答