Question

我有一个div定位工作，它被scroll-event触发。滚动事件多次被触发会导致闪烁的div，会发生什么。我的计划是在没有更多滚动事件被触发时淡出该div并重新开始。如何检查滚动结束？我想到了超时＆lt; - ＆gt;的组合滚动，但实际上没有像我希望的那样有效这是我到目前为止所得到的。

$(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

不幸的是，没有滚动停止的概念，所以你无法真正触发动画。可能效果更好的是为div设置“top”属性的动画，使其平滑地滑动到新位置而不是闪烁。

        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事件。 James Padolsey写了一篇很棒的example of scrollstop event。

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

好的，虽然我昨天很开心......今天现实回击...... SAFARI的回应是没有重新渲染移动div后面的所有必要碎片。特别是在tinyMCE的iframe上。所以我最终得到了以下内容，这很有效。淡出div - ＆gt;动画到位置 - ＆gt;仅在回调被触发时淡入..

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

        });

    });

});

jQuery - frollOut on Scroll / fadeIn on“scrollstop”

4 个答案: