Wie man jquery css ('display', 'block') und css ('display', 'none') in if else statement

Question

benutze Ich versuche, jquery-circle-progress (https://github.com/kottenator/jquery-circle-progress) zu verwenden, animiere, wenn Benutzer blättern in diesen Ort. Ich konnte etwas mit dem Bug machen. Problem ist die Animation wiederholt sich. Ich möchte es nur einmal animieren, wenn der Benutzer zu diesem Ort scrollt. Hier ist meine Arbeit:

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

versuchen

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