如何在if语句中使用jquery css（＆＃39; display＆＃39;，＆＃39; block＆＃39;）和css（＆＃39; display＆＃39;，＆＃39; none＆＃39;）

Question

我正在尝试使用jquery-circle-progress（https://github.com/kottenator/jquery-circle-progress）在用户滚动到该位置时启动动画。我能够做一些bug。问题是动画不断重复。当用户滚动到该位置时，我只想将其设置为动画一次。这是我的工作：

jquery的：

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

试

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;