Theres something about a progressing YouTube video that makes it difficult to produce a smoothly animating progress bar. Even YouTube's built in progress bar isnt smooth. Yet I think there must be a way to do it. 

I'm using custom controls for a YouTube embed and my progress bar is moving along in a jumpy manner rather than smoothly. Here's the code:

```
vidClock = setInterval(function() {
    if (state == 1) {
        var time = player.getCurrentTime();
        var percent = (time / duration) * 100;
        $seekSlider.css({
            'width' : percent + '%'
        });
    }
}, 100);

```

This variable origins aren't all shown but what they represent should be apparent. How can I make the bar move smoothly?

I tried adding a CSS transition effect to the element and also tried setting smaller intervals such as 10,20, and 30 (and after suggestion, have tried using JQuery animate).

Example, using `$.animate` as suggested by an answer below is not smooth: <http://jsfiddle.net/e11oy0eu/290/>