If statemant doesnt work with timeout function inside

I am trying to delay some actions inside my function. They work normally but when i try to include them inside timeout function my if statement if( percent > 50) doesn't work. It does it for all elements, not just once with percent higher then 50. I also tried with .delay(3000), it doesn't work.

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

So conclusion, either if statement works either timeout function, I cant accomplish both of them to work. Have any idea?

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');
  });
});