См. демонстрацию: jsFiddle
- У меня есть простая форма, которая переключается при нажатии 'show'/'cancel'
- Все работает отлично, но , если вы нажмете "отменить" вскоре после того, как будет раскрыта форма, есть хорошая 2-3-секундная отставание до начала анимации.
- Это не происходит, если вы подождали несколько секунд, прежде чем нажать "отменить".
- Задержка происходит во всех проверенных браузерах (например, ff, chrome).
1. Что может вызвать это отставание и как его можно предотвратить?
2. Есть ли лучший способ кодирования этой последовательности анимаций, который может предотвратить любые задержки?
HTML
<div id="newResFormWrap">
<form id="newResForm" action="" method="post" name="newRes">
<div id="newResFormCont">
<h3>title</h3>
<p>form!</p>
<div class="button" id="cancelNewRes">Cancel</div>
</div>
</form>
</div>
<div class="button" id="addRes">show</div>
JQuery
$("#newResForm").css({opacity: 0});
$("#addRes").click(function () {
toggleNewRes()
});
$("#cancelNewRes").click(function () {
toggleNewRes()
});
//toggleNewRes
function toggleNewRes() {
if ($("#newResFormWrap").css('display') == "none") {//if hidden
$("#addRes").animate({ opacity: 0 }, 'fast', function() {
$("#newResFormWrap").toggle('fast', function (){
$("#newResForm").animate({ opacity: 100 },2000);
});
});
} else { //if visible
$("#newResForm").animate({ opacity: 0 }, 100,function() {
$("#newResFormWrap").toggle('fast', function (){
$("#addRes").animate({ opacity: 100 });
});
});
}
}