jQuery - fadeOut no Rolo / fadeIn em “scrollstop”

Question

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.

Answer 1

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);

Answer 2

Você pode usar jQuery eventos especiais para a criação de um evento scrollstop. James Padolsey escreveu um exemplo grande de evento scrollstop .

Answer 3

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);
        });
    }
});

Answer 4

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');

        });

    });

});