jQuery - fadeOut no Rolo / fadeIn em “scrollstop”
Pergunta
Eu tenho um trabalho de posicionamento div que é acionado pelo rolagem-evento. O que acontece se que o evento de rolagem é demitido um monte de vezes que resulta em uma div cintilação. Meu plano é a desvanecer-se que div e volta fade in, logo que não mais de rolagem evento é acionado. Como posso verificar que a rolagem é mais? Eu pensei sobre uma combinação de tempo limite <-> rolagem, mas, na verdade, nada funcionou como eu esperava. Aqui está o que eu tenho até agora.
$(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");
};
});
});
Como você pode ver eu deixei uma de minhas últimas tentativas em lá, mas os retornos de chamada da função de fade não funcionou como esperado.
Solução
Infelizmente não existe o conceito de rolagem-stop para que você não pode realmente desencadear uma animação do que isso. O que pode funcionar melhor é em vez animar a propriedade 'top' de sua div para que ele desliza suavemente à sua nova posição em vez de cintilação.
topParentx = $('#tinyMCEwrapper').position().top;
var topTarget = "0px";
if ($(this).scrollTop() >= topParentx){
topTarget = ($(this).scrollTop()-topParentx) + "px";
}
$('.mceExternalToolbar').stop().animate({top, topTarget}, 500);
Outras dicas
Você pode usar jQuery eventos especiais para a criação de um evento scrollstop. James Padolsey escreveu um exemplo grande de evento scrollstop .
Fix para não pulso no rolo! setTimeout
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);
});
}
});
Ok, enquanto eu estava feliz ontem ... Realidade acidente vascular cerebral volta hoje ... reage safari com não re-renderizar todos os fragmentos necessários atrás da div em movimento. Especialmente sobre iframe de tinyMCE. Então eu acabei com a seguinte e isso funciona muito bem. Desaparece do div -> animação para a posição -> Fade in somente se callback é disparado ..
$(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');
});
});
});