3

スクロールイベントによって起動される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 つをそこに残しましたが、フェード関数のコールバックは期待どおりに機能しませんでした。

4

4 に答える 4

3

残念ながら、スクロールストップの概念がないため、そこからアニメーションを実際にトリガーすることはできません。代わりに、divの「top」プロパティをアニメーション化して、ちらつくのではなく、新しい位置にスムーズにスライドするようにすることをお勧めします。

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        }
        $('.mceExternalToolbar').stop().animate({top, topTarget}, 500);
于 2009-10-31T16:13:13.430 に答える
1

スクロールストップ イベントを作成するために、jQuery の特別なイベントを使用できます。James Padolsey はscrollstop イベントの素晴らしい例を書いています。

于 2009-11-17T16:59:47.213 に答える
1

スクロール時に脈動しないように修正！タイムアウトの設定

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);
        });
    }
});
于 2009-12-16T13:07:50.767 に答える
0

昨日は幸せだったのに...現実は今日戻ってきました... 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');

        });

    });

});
于 2009-11-01T14:25:12.913 に答える