javascript - 如何在 if else 语句中使用 jquery css ('display' , 'block' ) 和 css ('display' , 'none' )

Question

我正在尝试使用 jquery-circle-progress ( https://github.com/kottenator/jquery-circle-progress ) 在用户滚动到该位置时启动动画。我能够对 bug 做一些事情。问题是动画不断重复。当用户滚动到该位置时，我喜欢只为它设置一次动画。这是我的作品:

j查询:

$(window).scroll(function() {
var windowWidth = $(this).width();
var windowHeight = $(this).height();
var windowScrollTop = $(this).scrollTop();


$(document).ready(function() {
    $('#circle').circleProgress({
        value: 0.75,
        size: 180,
        fill: {
            gradient: ["lightblue", "grey"]
        }
    });
});


if (windowScrollTop > 760) {

    $('#circle').css('display', 'block');


} else {
    $('#circle').css('display', 'none');

}
});

html:

<div id="circle"></div>

CSS:

#circle {
text-align: center;
}

Answer 1

尝试

$(window).scroll(function() {
    var windowWidth = $(this).width();
    var windowHeight = $(this).height();
    var windowScrollTop = $(this).scrollTop();

    if (windowScrollTop > 760 && $('#circle').is(':hidden')) {
        $('#circle').show('normal', function() {
            $(this).circleProgress({
                value: 0.75,
                size: 180,
                fill: {
                    gradient: ["lightblue", "grey"]
                }
            });
        });
    } 
    if (windowScrollTop < 760 && $('#circle').is(':visible')) {
        $('#circle').hide();
    }
});