使用jQuery表单插件动画消息

Question

我在使用 jquery 表单插件时遇到问题。我有一个设置的表单，我想在用户提交错误信息时为错误/成功设置动画，或者在输入正确信息时为用户提供成功消息。但是我的问题是双重的。显示在同一页面上的消息仅适用于我当前使用的 jquery 在 Firefox 中。什么会导致这个？

我希望不同的消息在显示时滑入视图，但现在它们只是弹出视图。我如何使它具有动画效果或更确切地说是滑入视野？有问题的页面是here

$(document).ready(function() { 
var options = { 
target:        '#alert',
}; 
$('#myForm').ajaxForm(options); 
}); 

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
/*this is my addition to getting the slide into view, but does not work */
$('#alert').onsubmit(function() {
    // This will be called before the form is submitted
    $('.message').show().animate("slow");
});


/*$(function() {
        $('.message').('slow').show('slow');
        $('.message').('slow').show('slow').animate({opacit:1.0}, 4000).hide('slow');
    $('input').clearForm()
}); */ 

Answer 1

尝试这样做，普通的 show()/hide() 方法也可以做动画：

$('.message').show("slow");

见 jQuery show( speed, [callback] )

文档说：

使用 a 显示所有匹配的元素 优美的动画和射击 完成后的可选回调。

另外，您使用 animate() 不正确。为了让它工作，至少你需要将一些 CSS 属性作为一组选项传递给它。请参阅文档：

http://docs.jquery.com/Effects/animate

编辑：这就是我的意思是你使用我的建议：

$('#alert').onsubmit(function() {
    // This will be called before the form is submitted
    $('.message').show("slow");
});

Answer 2

是的，您的问题是您错误地使用了动画方法。我强烈建议您阅读jquery api docs 中有关“动画”功能的部分。 Karim 的建议可能正是您想要的，但是，如果您想要比滑动式更精细的动画，那么您可以使用 'fadeIn' 或 'animation' 方法。

比如……

$('.message').animate({opacity:100},500);

将有效地做同样的事情：

$('.message').fadeIn(500);

这将在半秒内淡入一个项目。在这种情况下，花时间使用 animate 方法并不是那么有用。在这种情况下会很有用，例如：

$('.message').animate({opacity:100,width:'100%',height:30},500);

这会将消息拉伸到 100% 并通过在 500 毫秒的过程中使其高度为 30 像素和不透明度为 100% 来显示它。

为了让“高度”和“宽度”动画起作用，元素通常必须是块元素。

抱歉，我的解释有点过头了……我现在有点无聊……