Question

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

Answer 1

在您的情况下，使用.show()和所需的同时幻灯片+淡入淡出效果的持续时间：

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

You can test out the effect here

对于您的代码，您需要从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;
});

Answer 2

问题是您的#formResponse容器最初并未隐藏。只要将响应文本插入其中，它就会直接显示，而不是将其淡入。您需要声明display: none;来隐藏它：

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

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

更新：如果您希望 BOTH 幻灯片和淡入，则需要使用额外的响应容器，因为一旦它滑出，它就会< em> IS 已经可见，并且无法从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");
});

它的作用是，它将首先向下滑动外部容器，一旦完成该动画，它将在内部容器中淡入。

Live example

希望这有帮助。

jQuery面板 - slideOut和fadeIn功能同时出现问题

2 个答案: