jQueryの - 「scrollstop」のスクロール/フェードインフェードアウトで

Question

私は、スクロールイベントによって呼び出されますdivの位置決め作業を持っています。何がスクロールイベントがちらつきの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");
        };
    });

});

あなたが見ることができるように私はそこに私の最後の試みの1を残したが、期待通りにフェードイン機能のコールバックは動作しませんでした。

Answer 1

あなたが本当にそれからアニメーションをトリガーすることはできませんので、

は、残念ながらスクロール停止の概念はありません。何より良い仕事もする代わりに、あなたの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

あなたはscrollstopイベントを作成するためのjQueryの特別なイベントを使用することができます。ジェームズPadolseyは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

バック

[OK]を私は昨日幸せであった...リアリティストローク今日... SAFARIは移動divの背後に必要なすべての断片を再レンダリングではないと反応します。特に、TinyMCEの者はiframeを超えます。 だから私は、次のようになってしまったし、これは非常によく動作します。 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');

        });

    });

});