jQuery animate not actually animating, but it is getting to the desired property [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. 开发者_如何学Python Closed 11 years ago.

I'm using jQuery's animate to build a progress bar.

I've tried a few different combinations of code, but I always get the same result. The animate() method seems to work, but I can't actually see the element getting animated. After the function is complete, the element is hidden (by another process). If I restart the process again, I see that the element has reached the desired width, but not visibly, as an animation. What am I missing?

            $("#progressbar").animate({
            width:'100px'
            }, {
            duration: 1500,
            easing: 'linear',
            complete: function() {
                console.log('done!')
            }
        });

Here is the original CSS for the #progressbar element:

#progressbar{
width:1px;
background-color:pink;
display:block;
}

I've tried different combinations of code, including without the "easing" property. The callback works, and it does in fact get to be 100px. I've copied code from other sites and put it in, with no results, which leads me to believe I might be having some kind of CSS issue, but I'm not sure.

To be clear, I'm not using jQuery UI for this (although, for the record, I have it installed on the page and I'm using for another function. I just tried removing it, and it didn't seem to have an effect).

---

Try this: http://jsfiddle.net/4DJFy/1/ Note that you need to define height if you have empty element.