jQuery - fadeOut sur Scroll / fadeIn sur « scrollstop »

Question

J'ai un travail de positionnement div qui est déclenché par l'événement de défilement. Qu'est-ce qu'il arrive que l'événement de défilement se tiré un tas de fois qui se traduit par une div vacillante. Mon plan est de disparaître que div et fade retour en dès aucun cas plus de défilement est déclenché. Comment puis-je vérifier que le défilement est terminée? Je pensais à une combinaison de délai d'attente <-> défilement mais en fait rien ne fonctionnait comme je l'espérais. Voici ce que je suis arrivé à ce jour.

$(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");
        };
    });

});

Comme vous pouvez le voir je suis parti un de mes dernières tentatives là-dedans, mais les callbacks de la fonction de fondu ne fonctionne pas comme prévu.

Answer 1

Malheureusement, il n'y a pas de concept de défilement-stop de sorte que vous ne pouvez pas vraiment déclencher une animation de cela. Ce qui peut fonctionner mieux est d'animer plutôt la propriété « top » de votre div afin qu'il glisse en douceur à sa nouvelle position au lieu de vacillement.

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        }
        $('.mceExternalToolbar').stop().animate({top, topTarget}, 500);

Answer 2

Vous pouvez utiliser des événements spéciaux jQuery pour créer un événement scrollstop. James Padolsey a écrit un de événement scrollstop.

Answer 3

Correction de ne pas le pouls sur défilement! 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 alors que j'étais heureux hier ... coup de réalité retour aujourd'hui ... SAFARI réagit avec pas re-rendu tous les fragments nécessaires derrière le div en mouvement. Surtout sur la iframe tinyMCE. Donc, j'ai fini avec ce qui suit et cela fonctionne très bien. Fades la div -> animation à la position -> Entrée en fondu uniquement si le rappel est tiré ..

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

        });

    });

});