0

ユーザーがスクロールしているときにID#statsのボタンを非表示にしようとしていますが、スクロールが完了したらフェードインして戻したいと思います。

何らかの理由で、これは以下では機能しません。

助けてくれてありがとう！

<button id="stats">
    <span class="icon prs">&#59146;</span><h3 id="views" class="prm">@file.views</h3>
    <span class="icon prs">&#59160;</span><h3 id="comments">20</h3>       
</button><!--end stats-->


<script>
    //fade stats in on load
    $(function(){  // $(document).ready shorthand
        $('#stats').hide().fadeIn('slow');
    });

    //hide stats when scrolling
    var $stats = $("#stats");
    var opacity = $stats.css("opacity");
    var scrollStopped;

    var fadeInCallback = function () {
        if (typeof scrollStopped != 'undefined') {
            clearInterval(scrollStopped);
        }

        scrollStopped = setTimeout(function () {
            $stats.animate({ opacity: 1 }, "slow");
        }, 200);
    };

    $(window).scroll(function () {
        if (!$stats.is(":animated") && opacity == 1) {
            $stats.animate({ opacity: 0 }, "slow", fadeInCallback);
        } else {
            fadeInCallback.call(this);
        }
    });
</script>
4

1 に答える 1

4

私はそれを少し単純化して、次のようなことをしようとします：

$(function(){
    var stats = $('#stats'),
        vis   = true;
        timer,


    stats.hide().fadeIn('slow');
    $(window).on('scroll', function() {
        clearTimeout(timer);
        if (vis) {
            stats.stop(true,true).fadeOut('slow');
            vis = false;
        }
        timer = setTimeout(function() {
            stats.stop(true,true).fadeIn('slow');
            vis = true;
        }, 400);
    });
});

フィドル

于 2013-02-24T04:50:25.293 に答える