Почему этот код Jquery не работает

Question

Я хочу изменить CSS поля ввода за время 1800 милисек.Работает, но плавного перехода нет.Должен ли я куда-нибудь положить fadeIn / Out?Что мне здесь не хватает:

$(".div-input").blur(function () {
     $('.div-input').removeClass("div-input", 1800).addClass('div-input-second');
});

Answer 1

Чтобы расширить предыдущие ответы, функции .removeClass и .addClass не имеют привязки по времени к ним. Вам нужно будет анимировать CSS вручную, если вы хотите анимацию от класса к классу.
Вот пример:

CSS

.div-input{
    color: red;
    width: 200px;
}

.div-input-second{
    color: blue;
    width: 300px;
}

JQuery

$(".div-input").click(function () {
    $(this).animate({
        color: '#0000ff',
        width: '300px'
    }, 1800).removeClass("div-input").addClass('div-input-second');
});

Это должно привести к возникновению анимации, а затем поменять классы после ее завершения, чтобы вы могли сделать больше с этим именем класса, если вам нужно.

редактирование:

См. этот jsfiddle для рабочей демонстрации с использованием .click. Я не уверен, что .blur оказывает заметное влияние на div элементов.

изменить 2:

Простой эффект для постепенного исчезновения элемента, обмена классами и последующего его восстановления может выглядеть примерно так (используя тот же CSS, что и выше):

JQuery

$(".div-input").click(function () {
    $(this).fadeOut(900, function(){
        $(this).toggleClass("div-input div-input-second")
            .fadeIn(1800);
    })
});

Вы можете увидеть это в действии на этом обновленном jsfiddle .

Answer 2

Для создания анимации в стиле CSS вам необходимо использовать .animate jquery animate

Answer 3

Вы можете использовать .animate (), чтобы изменить значения CSS самостоятельно, но между этими классами нет способа исчезнуть.

Answer 4

Выглядит как недопустимые параметры для одного, а также вы можете использовать контекстный this для селектора в function для blur.

removeClass () принимает либоимя класса или функции.Не уверен, что 1800 в вашем списке параметров.Если вы хотите анимацию, посмотрите на анимацию.

Попробуйте это ...

$(".div-input").blur(function () {
     $(this).removeClass("div-input").addClass('div-input-second');
});

Answer 5

Вы можете сделать это с помощью JQuery UI http://jqueryui.com/demos/switchClass/

$(".div-input").blur(function () {
    $(".div-input").switchClass("div-input", "div-input-second", 1800);
    // Optionally to switch back
    // $(".div-input-second").switchClass("div-input-second", "div-input", 1800);  
});

Как показано в этой скрипке: http://jsfiddle.net/kSBP3/3/

Answer 6

Либо используйте jQuery animate , либо посмотрите на этот плагин, http://plugins.jquery.com/project/animate-to-class Я не пробовал, но, похоже, вы ищете.Также - если вы используете FireFox, скачайте Firebug - у него есть хорошая консоль для отлова ошибок JS.