Jquery Animate перекрывается при загрузке изображения
Я работаю над проектом, в котором навигация на самом деле не меняет страницы, но получает данные, используя службы, в зависимости от того, по какой ссылке навигации я щелкаю и обновляю данные с помощью метода jquery .html(). Я хочу использовать загрузчик, который отображается при нажатии любой связывать и скрывать контент, когда службы ajax успешны, я хочу удалить загрузчик и показать контент, но каким-то образом анимации перекрываются, вызывая сбой анимации,
в примере кода здесь я не использую AJAX для обновления моей страницы, но простая кнопка и JQuery для обновления данных
<body>
<div id="loader">
<img src="loader.gif" alt="">
</div>
<br>
<div id="content">
This is the content
</div>
<input type="button" id="update" value="Update Data">
</body>
<script>
function showContent(){
$('#loader').fadeOut(200).promise().done(function(){
$('#content').fadeIn(200).promise().done(function(){
});
});
}
function hideContent(){
$('#content').fadeOut(200).promise().done(function(){
$('#loader').fadeIn(200).promise().done(function(){
});
});
}
$("#update").click(function(){
hideContent();
$("#content").html("New Data");
setTimeout(showContent(), 10000);
});
</script>
при нажатии на кнопку обновления это должно произойти, контент должен исчезнуть, загрузчик должен появиться, обновить контент, загрузчик исчезнет, контент появится,
но я получаю и загрузчик и контент появился в конце концов
Я использовал setTimeout, чтобы дать некоторую задержку, но она не работает, я также использовал некоторые флаги ранее, но это тоже не сработало. JsFiddle: JsFiddleLink
1 ответ
Зачем использовать setTimeout()? Вы можете returnзацепи обещание
function showContent(){
return $('#loader').fadeOut(200).promise().done(function(){
return $('#content').html(data).fadeIn(200).promise()
});
}
function hideContent(){
return $('#content').fadeOut(200)
.done(function() {
this.empty();
return $('#loader').fadeIn(200).promise()
});
}
$("#update").click(function() {
hideContent().then(showContent)
})