Почему slideDown в сообщениях об ошибках не работает с проверкой jQuery?

Question

Итак, взгляните на код: http://jsfiddle.net/qb34B/

Введите неверный адрес электронной почты, нажмите кнопку Отправить. Вы увидите, что сообщение об ошибке исчезает.

Это моя проблема: я хочу, чтобы можно было убрать ошибку. Но работает только fadeIn. Как я могу получить сообщение об ошибке для slideDown?

Он должен работать во всех браузерах, которые поддерживает jQuery (IE7 +, Firefox, Safari, Chrome и т. Д.)

Answer 1

Здесь - рабочий пример. В этом решении я использую float:left для элементов формы, а затем устанавливаю опцию оболочки с помощью div.

    <form >
        <input type="email" name="email" placeholder="Enter email" style="float:left;"/>
        <input type="submit" id="submit" style="float:left;"/>
    </form>

    $(document).ready(function() {

        jQuery('form').validate({
            debug: true,
            rules: {
                email: {
                    required: true,
                    email: true
                }
            },
            wrapper: 'div',
            messages: {
                email: "Please enter a valid email address."
            },
            errorPlacement: function(error, element) {
                     error.appendTo(element.parent()).hide().slideDown('normal', function() {
                     //callback func
                });
            }
        });
    });

Answer 2

Ошибка отображается с использованием элемента label, который является встроенным элементом, поэтому его нельзя скользить (анимированное изменение его высоты).

Если вы хотите скользящее поведение, вам придется написать код, чтобы сгенерировать требуемую разметку и применить скользящее поведение к нему.

Взгляните на это демо. Я написал собственную логику, чтобы показатьскользящий эффект на случай, если вы собираетесь использовать собственную логику.

Демо

Answer 3

Обновление Я обновил код, чтобы он успешно сдвинулся вниз с ошибки и скрылся.К сожалению, мне пришлось использовать setInterval, что не идеально.Но это обходной путь, если вы не можете найти другой путь.

http://jsfiddle.net/XrMzL/5/

Вы можете попробовать следующее

    $(document).ready(function(){

    setInterval(function() {
        if($(".valid").prev().hasClass("errorSlideDown")) {
           $(".valid").prev().slideUp();
        }
    },1000);

    jQuery('form').validate({
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Please enter a valid email address."
        },
        errorPlacement: function(error, element) {
            if (!element.prev().hasClass("errorSlideDown")) {
                var itm = $("<div />").html(error.html()).addClass("errorSlideDown").hide();
                itm.insertBefore(element).slideDown();
            }
        }
    });
    });

Я использовал insertBefore, чтобы облегчить жизнь, когдапроверка на наличие уже созданного мной динамического диапазона с помощью функции .prev ().