jQuery - fadeout على التمرير / fadein على "scrollstop"

Question

لدي تحديد موقع 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");
        };
    });

});

كما ترون أنني تركت أحد محاولاتي الأخيرة هناك، لكن ردود الوظيفة تتلاشى لا تعمل كما هو متوقع.

Answer 1

لسوء الحظ، لا يوجد مفهوم للتوقف عن التمرير حتى لا تتمكن من تشغيل الرسوم المتحركة من ذلك. ما قد يعمل بشكل أفضل هو بدلا من ذلك تحريك خاصية "Top" الخاص بك Div الخاص بك بحيث تنزلق بسلاسة إلى موقع جديد بدلا من الخفقان.

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

Answer 2

يمكنك استخدام الأحداث الخاصة JQuery الخاصة لإنشاء حدث SCROLLSTOP. كتب جيمس بادولسي عظيم مثال على الحدث Scrollstop.

Answer 3

إصلاح لعدم النبض على التمرير! 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

حسنا، بينما كنت سعيدا بالأمس ... السكتة الدماغية الواقع مرة أخرى اليوم ... تفاعل سفاري مع عدم إعادة تقديم جميع الأجزاء اللازمة وراء التحرك خاصة حول iFrame Tinymce. لذلك انتهى بي الأمر مع ما يلي وهذا يعمل بشكل جيد للغاية. يتلاشى DIV -> الرسوم المتحركة إلى الوظيفة -> تتلاشى في حالة إطلاق رد الاتصال ..

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

        });

    });

});