如果语句不适用于内部的超时功能

Question

我试图在我的功能中延迟一些动作。它们正常工作，但当我尝试将它们包含在超时功能我的 if语句 if( percent > 50)不起作用时。它适用于所有元素，而不仅仅是高于50的百分比。我也尝试使用.delay(3000)，它不起作用。

if (percent > 50) {
  $(this).addClass("gt-50").delay(3000);
  $(".gt-50").children('.ppc-progress').css('clip','rect(0px, '+ widthhalf +'px, '+ width +'px, 0px) ').delay(3000);
  $(".gt-50").children('.ppc-progress').children('.ppc-progress-fill').css('clip','rect(0px, '+ width +'px, '+ width +'px, '+ widthhalf +'px) ').delay(3000);
}

所以结论，无论 if语句是否正常工作超时功能，我都无法完成它们的工作。有什么想法吗？

jQuery(function ($) {
  $( ".progress-pie-chart" ).each(function(  ) {

    percent = parseInt($(this).data('percent'));

    var width = $(this).width();
    var widthhalf = width / 2;

    if (percent > 50) {
      setTimeout(function () {
        $(".progress-pie-chart").addClass("gt-50");
        $(".gt-50").children('.ppc-progress').css('clip','rect(0px, '+ widthhalf +'px, '+ width +'px, 0px) ');
        $(".gt-50").children('.ppc-progress').children('.ppc-progress-fill').css('clip','rect(0px, '+ width +'px, '+ width +'px, '+ widthhalf +'px) ');
      }, 3000);
    }
    $( this ).css('height',''+ width +'px');
    $( this ).children('.ppc-progress').children('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $( this ).children('.ball-holder').css('transform','rotate('+ deg +'deg)');
    $( this ).children('.ppc-progress').css('clip','rect(0px, '+ width +'px, '+ width +'px, '+ widthhalf +'px) ');
    $( this ).children('.ppc-progress').children('.ppc-progress-fill').css('clip','rect(0px, '+ widthhalf +'px, '+ width +'px, 0px) ');
    $('.summ-cont').css('top',''+ -widthhalf +'px');
  });
});