Question

当用户滚动到视图中时，我想创建一个自动动画条形图。有点像http://www.adhamdannaway.com/about

我使用CSS创建了图表，并希望使用jquery waypoint切换高度百分比动画。我试着编写jquery代码，但似乎失败了。我仍然是jQuery和CSS的新手，所以我希望有人可以帮助启发我。这是我到目前为止的尝试。

HTML code：

    <ul class="chart">
               <li class="axis">
            <div class="label">MVP</div>
            <div class="label">All Star</div>
            <div class="label">Slugger</div>
            <div class="label">Rookie</div>
            <div class="label">Triple A</div>
    </li>

            <li id="teal" class="teal p-95" style="visibility: visible; height: 95%; opacity: 1;">
            <div class="percent">"95"<span>%</span></div>
            <div class="skill">Karate</div></li>
                <li id="salmon" class="salmon p-90" style="visibility: visible; height: 90%; opacity: 1;">
            <div class="percent">"90"<span>%</span></div>
            <div class="skill">Taekwondo</div></li>
                <li id="peach" class="peach p-80" style="visibility: visible; height: 80%; opacity: 1;">
            <div class="percent">"80"<span>%</span></div>
            <div class="skill">Nunchucks</div></li> 
                <li id="lime" class="lime p-75" style="visibility: visible; height: 75%; opacity: 1;">
            <div class="percent">"75"<span>%</span></div>
            <div class="skill">Bow Staff</div></li>
                <li id="grape" class="grape p-40" style=" visibility: visible; height: 40%; opacity: 1;">
            <div class="percent">"40"<span>%</span></div>
            <div class="skill">Suplex</div></li>

CSS代码：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
body {
  font-family: 'Open Sans', sans-serif;
}

.chart {
  clear: both;
  padding: 0;
  width: 100%;
}

@media (min-width: 700px) {
  .chart {
    background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
    height: 425px;
    margin: 0 auto emCalc(-32px);
  }
}
.chart li {
  display: block;
  height: 125px;
  padding: emCalc(25px) 0;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

@media (min-width: 700px) {
  .chart li {
    display: inline-block;
    height: 425px;
    margin: 0 1.8% 0 0;
    width: 15%;
  }
}
.chart .axis {
  display: none;
  top: emCalc(-45px);
  width: 8%;
}

@media (min-width: 700px) {
  .chart .axis {
    display: inline-block;
  }
}
.chart .label {
  background: #cccccc;
  margin: -9px 0 71px 0;
}

.chart .percent {
  letter-spacing: -3px;
  opacity: .4;
  width: 100%;
  font-size: 30px;
  font-size: 1.875rem;
}

@media (min-width: 700px) {
  .chart .percent {
    position: absolute;
    font-size: 62px;
    font-size: 3.875rem;
  }
}
.chart .percent span {
  font-size: 30px;
  font-size: 1.875rem;
}

.chart .skill {
  font-weight: 800;
  opacity: .5;
  overflow: hidden;
  text-transform: uppercase;
  width: 100%;
  font-size: 14px;
  font-size: 0.875rem;
}

@media (min-width: 700px) {
  .chart .skill {
    bottom: 20px;
    position: absolute;
    font-size: 16px;
    font-size: 1rem;
  }
}
.chart .teal {
  background: #4ecdc4;
  border: 1px solid #4ecdc4;
  background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
}

.chart .salmon {
  background: #ff6b6b;
  border: 1px solid #ff6b6b;
  background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
}

.chart .lime {
  background: #97f464;
  border: 1px solid #97f464;
  background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
  background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
  background-image: linear-gradient(#b7f794, #97f464 70%);
}

.chart .peach {
  background: #ffcd92;
  border: 1px solid #ffcd92;
  background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: linear-gradient(#ffe4c5, #ffcd92 70%);
}

.chart .grape {
  background: #ab64f4;
  border: 1px solid #ab64f4;
  background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: linear-gradient(#c594f7, #ab64f4 70%);
}

.chart .p-95{
    height:95%;
}

.chart .p-90{
    height:90%;
}

.chart .p-80{
    height:80%;
}

.chart .p-75{
    height:75%;
}

.chart .p-40{
    height:40%;
}

使用航点JS的脚本代码：

<script>
           // Animate Chart
    $('.chart').waypoint(function(event, direction) {

       $('#teal').css({'visibility':'visible', 'height': '0%'}).stop().delay(200).animate({'opacity':'1', 'height':'95%'}, 1000, 'easeOutExpo');
       $('#salmon').css({'visibility':'visible', 'height': '0%'}).stop().delay(400).animate({'opacity':'1', 'height':'90%'}, 1000, 'easeOutExpo');
       $('#lime').css({'visibility':'visible', 'height': '0%'}).stop().delay(600).animate({'opacity':'1', 'height':'80%'}, 1000, 'easeOutExpo');
       $('#peach').css({'visibility':'visible', 'height': '0%'}).stop().delay(800).animate({'opacity':'1', 'height':'75%'}, 1000, 'easeOutExpo');
       $('#grape').css({'visibility':'visible', 'height': '0%'}).stop().delay(1000).animate({'opacity':'1', 'height':'40%'}, 1000, 'easeOutExpo');

    }, {
       offset: '80%',
       triggerOnce: true

    });
        </script>

使用jQuery为条形图高度设置动画

0 个答案: