Анимировать сообщение с помощью плагина формы jquery

Question

У меня проблема с использованием плагина jquery Form. У меня есть форма, которая настроена, чтобы я хотел анимировать ошибки / успехи, когда пользователь отправляет неверную информацию или дает пользователю сообщение об успехе, когда затем вводит правильную информацию. Однако моя проблема двояка. Сообщение, отображаемое на той же странице, работает только в Firefox с jquery, который я сейчас использую. Что вызвало бы это?

Я бы хотел, чтобы при отображении отображались разные сообщения, но сейчас они просто появляются. Как мне сделать его одушевленным или точнее скользить в поле зрения? Страница, о которой идет речь, здесь

$(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] )

Док говорит:

Показать все подходящие элементы, используя изящная анимация и стрельба необязательный обратный вызов после завершения.

Кроме того, вы используете 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

Да, ваша проблема в том, что вы неправильно используете методы анимации. Я призываю вас прочитать раздел о функции animate в jquery api docs . Предложение Карима, вероятно, именно то, что вы хотите, но, если вам нужна более сложная анимация, чем просто слайд-ап, то вы можете использовать методы 'fadeIn' или 'animation'.

Например ...

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

Эффективно будет делать то же самое, что и:

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

Который исчезнет за полсекунды. В этом случае не стоит тратить время на использование метода animate. В этом случае было бы полезно, например:

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

Это расширит сообщение до 100% и покажет его, сделав его высоту 30px и непрозрачность 100% в течение 500 миллисекунд.

Чтобы анимации «высоты» и «ширины» работали, элемент обычно должен быть блочным элементом.

Извините за излишнюю разработку ... Мне сейчас немного скучно ...