jQuery - затухание при прокрутке / fadeIn при “остановке прокрутки”
Вопрос
У меня работает позиционирование div, которое запускается событием прокрутки.Что происходит, когда событие прокрутки запускается несколько раз, что приводит к мерцанию div.Мой план состоит в том, чтобы стереть этот div и вернуться обратно, как только больше не будет запущено событие прокрутки.Как я могу проверить, что прокрутка завершена?Я думал о сочетании таймаута <-> прокрутите, но на самом деле ничего не сработало так, как я надеялся.Вот что у меня получилось на данный момент.
$(document).ready(function(){
//var animActive = false;
$(window).scroll(function() {
/*
if (animActive == false){
animActive = true;
$('.mceExternalToolbar').fadeOut(100, function () {
$('.mceExternalToolbar').fadeIn(3000, function () {
animActive = false;
console.log("NOW");
});
});
}
*/
topParentx = $('#tinyMCEwrapper').position().top;
if ($(this).scrollTop() >= topParentx){
$('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
} else {
$('.mceExternalToolbar').css('top', "0px");
};
});
});
Как вы можете видеть, я оставил там одну из своих последних попыток, но обратные вызовы функции fade сработали не так, как ожидалось.
Решение
К сожалению, не существует концепции остановки прокрутки, поэтому вы не можете запустить анимацию на основе этого.Что может сработать лучше, так это вместо этого анимировать свойство 'top' вашего div, чтобы оно плавно перемещалось в новое положение, а не мерцало.
topParentx = $('#tinyMCEwrapper').position().top;
var topTarget = "0px";
if ($(this).scrollTop() >= topParentx){
topTarget = ($(this).scrollTop()-topParentx) + "px";
}
$('.mceExternalToolbar').stop().animate({top, topTarget}, 500);
Другие советы
Вы можете использовать специальные события jQuery для создания события scrollstop.Джеймс Падолси написал замечательную пример события остановки прокрутки.
Исправьте, чтобы не пульсировало при прокрутке!время установки
var animActive = false;
$(window).scroll(function(){
if (animActive == false){
animActive = true;
$('#target').fadeOut(100, function () {
var scrl = setTimeout( function(){
animActive = false;
$('#target').fadeIn(500);
}, 2000);
});
}
});
Хорошо, пока я вчера была счастлива...Реальность возвращается к сегодняшнему дню...SAFARI реагирует тем, что не выполняет повторный рендеринг всех необходимых фрагментов за перемещаемым div.Особенно над iframe от TinyMCE.Итак, в итоге я пришел к следующему, и это работает довольно хорошо.Переводит div -> animation в положение -> Fade in только в том случае, если выполняется обратный вызов..
$(document).ready(function(){
$(window).scroll(function() {
topParentx = $('#tinyMCEwrapper').position().top;
var topTarget = "0px";
if ($(this).scrollTop() >= topParentx){
topTarget = ($(this).scrollTop()-topParentx) + "px";
$('.mceExternalToolbar').animate({opacity: 0}, 1);
}
$('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){
$('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing');
});
});
});