steps in jquery

by narensrinivasans

HTML

<div id="go">Go</div>
<div class="block"></div>

CSS

.block {
    background: #eee;
    height: 80px;
    position: relative;
    left: 0;
    width: 100px;
    -webkit-animation: block 1s steps(5);
}
#go {
    background: lightblue;
    cursor: pointer;
    padding: 5px;
    width: 150px;
    margin: 20px 0;
}
@-webkit-keyframes block {
    0%{width:0} 100% {width:100px}
}

JavaScript

$("#go").click(function(){
    $(".block").animate({ width: 100 }, {
      duration: 5000,
      step: function(now, fx){
                scaleVal = now;
                fx.start = 0.5; 
                $(".block").css("width", now);
      }
    });
});