JQuery: затухание, выполнение действия, затем обратное появление

Итак, у меня есть то, что составляет HTML-форму, но не является фактическим <form> как таковым. У меня есть кнопка «Очистить», которую я сейчас использую, чтобы сбросить все поля до значений по умолчанию.

С эстетической точки зрения я хотел бы, чтобы форма исчезала, сбрасывалась, пока она «ушла», и снова исчезала, полностью сбрасываясь. У меня есть этот код до сих пор, чтобы попытаться достичь этого:

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

Однако происходит следующее: когда div исчезает, поля сбрасываются, поэтому пользователь видит, что все они физически возвращаются к своим значениям по умолчанию, пока он исчезает. Затем он исчезает снова, как только он закончил исчезать. Закрыть, но я не хочу, чтобы пользователь видел сброс полей. Я попробовал следующее, чтобы он дождался завершения затухания для сброса полей, но я получил бесконечный цикл или что-то в этом роде (браузер сказал, что скрипт работает медленно, и спросил меня, хочу ли я его остановить):

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

Так что я не совсем уверен, куда идти отсюда. Любая помощь будет оценена по достоинству. Спасибо.


jquery reset fadein fadeout
person MegaMatt    schedule 29.01.2010    source источник
comment
разве вы не должны указывать параметр скорости перед передачей обратного вызова?   -  person hakre    schedule 28.08.2012

Ответы (4)


arrow_upward
3
arrow_downward

Недавно у меня была та же проблема с fadeOut, которая, кажется, работает неправильно, и я нашел для нее решение:

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

Выглядит так же, как fadeIn/fadeOut, но работает так, как ожидалось (изменения вносятся, пока элемент невидим)

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

person Damian    schedule 12.12.2012

arrow_upward
1
arrow_downward

Использовать

jQuery.stop().fadeOut()

для предотвращения постановки в очередь анимации fadeOut.

.stop() can be used to prevent queueing any jQuery Animation

http://api.jquery.com/stop/

person cgupta    schedule 22.08.2013

arrow_upward
0
arrow_downward

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

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

РЕДАКТИРОВАТЬ: после просмотра кода выясняется (по крайней мере, в 1.3.2), что если вы укажете функцию в качестве первого аргумента, она оценит ее и будет использовать возвращаемое значение в качестве скорости. Если вы укажете скорость, то ваша функция обратного вызова должна работать так, как вы ожидаете. Элемент должен исчезнуть, затем сработает обратный вызов, и будет выполнен ваш код сброса и постепенного появления.

person tvanfosson    schedule 29.01.2010
comment
Я надеялся, что это будет так просто, но добавление normal в качестве первого параметра для fadeOut() по-прежнему дает тот же результат. По мере затухания поля сбрасываются. Я согласен с вами, что код обратного вызова должен ждать, пока исчезновение не закончится (и я всегда думал, что это так), но этого просто не происходит. - person MegaMatt; 30.01.2010

arrow_upward
0
arrow_downward

Посмотрите .delay.

Подробнее: установите время анимации для fadeOut() и используйте задержку для анимации fadeIn(), которая больше, чем время анимации fadeOut. В этом примере действия сброса будут выполняться во время анимации исчезновения и предположительно не займут более 600 мс.

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

Редактировать: К сожалению, немного неправильно понял проблему. Вы хотите, чтобы логика формы сброса срабатывала при вызове fadeIn(), а не при вызове fadeOut. Но я думаю, что все же хорошо синхронизировать события анимации. Попробуйте что-то вроде:

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});
person ghoppe    schedule 29.01.2010
comment
@ghoppe, все еще немного не так в вашем редактировании. Помещение кода сброса в обратный вызов fadeIn() заставило бы его исчезнуть, затем выполнить код сброса, что противоположно тому, что мне нужно. Мне нужно, чтобы он исчезал, сбрасывался так, чтобы пользователь не видел, как он сбрасывается, а затем снова исчезал во всех сбросах. Я думаю, что задержка может сработать, так как параметр скорости, предложенный в других ответах, не работает. Может быть, если я поставлю код сброса на задержку, которая немного больше, чем продолжительность fadeOut? Но тогда я не уверен, что бы я назначил delay()... - person MegaMatt; 30.01.2010
comment
Да, именно поэтому я установил задержку на 650 и fadeOut на 600, я предположил, что ваши действия по сбросу будут выполнены довольно быстро. Возможно, вам придется возиться с цифрами. В качестве альтернативы вам может потребоваться взглянуть на setTimeout(), чтобы вызвать действия сброса и синхронизировать вещи. Сам не экспериментировал… - person ghoppe; 30.01.2010