2010-01-29 3 views
1

Итак, у меня есть то, что составляет форму html, но не является фактическим <form>, per se. У меня есть кнопка «Очистить», которую я использую для сброса всех полей до их значений по умолчанию.JQuery: Fading Out, Выполнение действия, затем Fading Back In

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

function Reset() { 

    $formDiv.fadeOut(function() { 

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

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

function Reset() { 

    $formDiv.fadeOut(function() { 

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

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

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

+0

не вы должны дать параметр скорости перед передачей в функцию обратного вызова? – hakre

ответ

3

У меня была та же проблема, в последнее время с fadeOut, что, кажется, работает неправильно, и я нашел решение для этого:

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

    //here changes to this element 

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

Он выглядит так же, как FadeIn/Затухание, но он работает, как ожидается (изменения выполняются, пока элемент невидим)

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

0

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

Более подробно: Установить количество времени анимация будет принимать для FADEOUT(), и использовать задержку для FadeIn() анимации, которая больше, чем время FADEOUT анимации. В этом примере операции сброса будут выполняться во время анимации 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 
    }); 
}); 
+0

@ghoppe, все еще немного в вашем редактировании. Ввод кода сброса в обратный вызов fadeIn() заставил бы его затухать, * затем * сделать код сброса, который является противоположным тому, что мне нужно. Мне нужно, чтобы оно исчезло, сбросьте его, не увидев, что он сбрасывается, а затем исчезает во всех сбросах. Я думаю, что задержка может работать, поскольку параметр скорости, предложенный в других ответах, не работает. Может быть, если я положу код сброса на задержку, которая немного длиннее длительности fadeOut? Но тогда я не уверен, что бы назначить задержку() для ... –

+0

Да, поэтому я установил задержку на 650 и fadeOut до 600, я предположил, что ваши действия по сбросу будут довольно быстро выполнены. Возможно, вам придется играть с цифрами. Кроме того, вам может потребоваться просмотреть setTimeout(), чтобы инициировать действия по сбросу и синхронизировать вещи. Я не экспериментировал сам ... – ghoppe

0

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

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

EDIT: После просмотра кода, он появляется (в 1.3.2, по крайней мере), что если вы передаете функции в качестве первого аргумента, он будет оценивать и использовать возвращаемое значение в качестве скорость. Если вы укажете скорость, то ваша функция обратного вызова будет работать так, как вы ожидаете. Элемент должен исчезнуть, тогда будет активирован обратный вызов, и будет выполнен сброс и исчезновение кода.

+0

Я надеялся, что это будет так просто, но добавление «нормального» в качестве первого параметра fadeOut() по-прежнему дает тот же результат. По мере того, как он исчезает, поля сбрасываются. Я согласен с вами в том, что код обратного вызова должен ждать окончания увядания (и я всегда думал, что это так), но этого просто не происходит. –

1

Использование

jQuery.stop().fadeOut() 

предотвратить очереди в FADEOUT анимации.

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

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

+0

thx это экономит мой день :) –