如何在if语句中使用jquery css（'display'，'block'）和css（'display'，'none'）

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

尝试

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