jQuery와 Sass가있는 스킬 바

포트폴리오 페이지를 만들고 있는데 jQuery로 너비를 움직이는 스킬 바를 포함 시키려고하고 있지만 문제가 발생했습니다. 아무 일도 일어나지 않습니다.jQuery와 Sass가있는 스킬 바

HTML

<div class="skillbar clearfix" data-percent="89%"> 
       <div class="skillbar-title"><span>HTML5</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">89%</div> 
      </div> 

      <div class="skillbar clearfix" data-percent="87%"> 
       <div class="skillbar-title"><span>CSS3</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">87%</div> 
      </div> 

      <div class="skillbar clearfix" data-percent="58%"> 
       <div class="skillbar-title"><span>JavaScript</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">58%</div> 
      </div> 

      <div class="skillbar clearfix" data-percent="68%"> 
       <div class="skillbar-title"><span>jQuery</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">68%</div> 
      </div> 

      <div class="skillbar clearfix" data-percent="73%"> 
       <div class="skillbar-title"><span>Sass</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">73%</div> 
      </div> 

      <div class="skillbar clearfix" data-percent="82%"> 
       <div class="skillbar-title"><span>Bootstrap</span></div> 
       <div class="skillbar-bar"></div> 
       <div class="skill-bar-percent">82%</div> 
      </div>

SASS

.skillbar 
    position: relative 
    display: block 
    margin: 1.4rem auto 
    width: 85% 
    background: $col-gray 
    height: 2.4rem 
    border-radius: 3px 
    transition: 0.1s linear 
    transition-property: width, background-color 
.skillbar-title 
    position: absolute 
    top: 0 
    left: 0 
    width: 110px 
    font-weight: bold 
    font-size: 1rem 
    color: #ffffff 
    background: $col-darkgray 
    border-top-left-radius: 3px 
    border-bottom-left-radius: 3px 
.skillbar-title span 
    display: block 
    background: rgba(0, 0, 0, 0.1) 
    padding: 0 20px 
    height: 2.4rem 
    line-height: 35px 
    text-align: center 
    border-top-left-radius: 3px 
    border-bottom-left-radius: 3px 
.skillbar-bar 
    height: 2.4rem 
    width: 0px 
    background: $col-aqua 
    border-radius: 3px 
.skill-bar-percent 
    position: absolute 
    right: 10px 
    top: .3rem 
    font-size: 1rem 
    height: 1.4rem 
    line-height: 1.5 
    color: $col-light

jQuery를

$(document).ready(function(){ 
    $('.skillbar').each(function(){ 
     $(this).find('.skillbar-bar').animate({ 
      width:$(this).attr('data-percent') 
     },4000); 
    }); 
});

사업부는에서 가야(.skillbar-bar에 정의 됨)의 값은 data-percent (HTML에 정의 됨)입니다.

내 문제는 페이지를로드해도 아무런 문제가 없다는 것입니다.

출처

2017-12-03 Krle

예제에 아무 것도 표시되지 않습니다. 문제를 해결하십시오. –

필요한 CSS 코드 만 제공 할 수 있습니까? 그 후에 하나의 발췌 문장에 모든 것을 결합하면 사람들은 문제를 명확하게 볼 수 있습니다. – cowCrazy

코드는 다음과 같습니다. DEMO. 확인하고 구체적으로 무엇이 잘못되었는지 알려주십시오.

출처

2017-12-03 17:39:46

네, 기본적으로 그렇게하지 않습니다 ... 페이지를로드 할 때 너비는 0px로 유지됩니다. SASS가 문제입니까 아니면 다른 것입니까? – Krle

SASS를 사용 하시겠습니까? CSS doesnt는 같은 것을합니까? –

예, Sass는 대괄호 나 세미콜론을 사용하지 않지만 동일한 .css 파일로 컴파일됩니다. 그러나 실제 문제가 무엇인지 확실하지 않습니다. 단지 작동하지 않습니다. – Krle

결국 그것은 나쁜 jQuery CND 링크였습니다. console.log-ed는 jQuery 스 니펫의 개별 요소를 처리했지만 모든 것이 정상적으로 작동하므로 콘솔을 확인하는 것이 번거롭지 않았다. 불필요한 질문으로 불편을 끼쳐 드려 죄송합니다.

출처

2017-12-04 11:03:56 Krle

jQuery와 Sass가있는 스킬 바

답변

관련 문제