circlebar.js: 11 Uncaught TypeError: $ (...). Find (...). Circle не является функцией

Question

Я пытаюсь создать круглую панель с jQuery, но есть одна ошибка, отображаемая в консоли , которые не могут быть решены. Погуглили, но ничего не произошло. Кто-нибудь знает, как я могу исправить эту ошибку? Правильно, что из-за этого код не может выполняться по фрагменту. Поэтому, пожалуйста, не уменьшайте это, это часть этой проблемы.

$(document).ready(function ($) { 
 
    function animateElements() { 
 
     $('.progressbar').each(function() { 
 
      var elementPos = $(this).offset().top; 
 
      var topOfWindow = $(window).scrollTop(); 
 
      var percent = $(this).find('.circle').attr('data-percent'); 
 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
 
      var animate = $(this).data('animate'); 
 
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { 
 
       $(this).data('animate', true); 
 
       $(this).find('.circle').circleProgress({ 
 
        startAngle: -Math.PI/2, 
 
        value: percentage, 
 
        thickness: 8, 
 
        fill: { 
 
         color: '#1B58B8' 
 
        } 
 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
 
       }).stop(); 
 
      } 
 
     }); 
 
    } 
 

 
    // Show animated elements 
 
    animateElements(); 
 
    $(window).scroll(animateElements); 
 
});

.progressbar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    margin: 25px; 
 
} 
 
.circle { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.circle canvas { 
 
    vertical-align: middle; 
 
} 
 
.circle div { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 
.circle strong i { 
 
    font-style: normal; 
 
    font-size: 0.6em; 
 
    font-weight: normal; 
 
} 
 
.circle span { 
 
    display: block; 
 
    color: #aaa; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="width:100%;height:500px;"></div> 
 

 
<h3>Sed scelerisque</h3> 
 

 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="98"> 
 
     <div></div> 
 
     <p>Quisque's</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="30"> 
 
     <div></div> 
 
     <p>Maecenas</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="77"> 
 
     <div></div> 
 
     <p>Pellentesque</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="49"> 
 
     <div></div> 
 
     <p>Etiam sodales</p> 
 
    </div> 
 
</div> 
 
<div style="width:100%;height:500px;"></div>

Answer 1

Оказывается, что вам просто необходимо включить в Jquery и кругового ПРОГРЕСС расслоения плотных файлы через ваш HTML - т.е.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script> 

См пример ниже:

$(document).ready(function ($) { 
 
    function animateElements() { 
 
     $('.progressbar').each(function() { 
 
      var elementPos = $(this).offset().top; 
 
      var topOfWindow = $(window).scrollTop(); 
 
      var percent = $(this).find('.circle').attr('data-percent'); 
 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
 
      var animate = $(this).data('animate'); 
 
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { 
 
       $(this).data('animate', true); 
 
       $(this).find('.circle').circleProgress({ 
 
        startAngle: -Math.PI/2, 
 
        value: percentage, 
 
        thickness: 8, 
 
        fill: { 
 
         color: '#1B58B8' 
 
        } 
 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
 
       }).stop(); 
 
      } 
 
     }); 
 
    } 
 

 
    // Show animated elements 
 
    animateElements(); 
 
    $(window).scroll(animateElements); 
 
});

.progressbar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    margin: 25px; 
 
} 
 
.circle { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.circle canvas { 
 
    vertical-align: middle; 
 
} 
 
.circle div { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 
.circle strong i { 
 
    font-style: normal; 
 
    font-size: 0.6em; 
 
    font-weight: normal; 
 
} 
 
.circle span { 
 
    display: block; 
 
    color: #aaa; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script> 
 
<div style="width:100%;height:500px;"></div> 
 

 
<h3>Sed scelerisque</h3> 
 

 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="98"> 
 
     <div></div> 
 
     <p>Quisque's</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="30"> 
 
     <div></div> 
 
     <p>Maecenas</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="77"> 
 
     <div></div> 
 
     <p>Pellentesque</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="49"> 
 
     <div></div> 
 
     <p>Etiam sodales</p> 
 
    </div> 
 
</div> 
 
<div style="width:100%;height:500px;"></div>