更改表格宽度动画

Question

Is it possible to smoothly animate the width of a table. Ten percent per second would be a good rate. So that it slowly expands and keeps expanding?

On load <table id="01" width="80%" height="769">

1 second <table id="01" width="90%" height="769">

2 second <table id="01" width="100%" height="769">

3 second <table id="01" width="110%" height="769">

Answer 1

There are several ways to do so. If you are willing to assume html5 supporting browsers, check out css transformations and transitions. Transitions are easier to use for what you need. you can define you css like this:

#01 {
    -moz-transition : width 3s; /* Firefox */
    -webkit-transition : width 3s; /* chrome and safari */
    -o-transition: width 3s; /* Opera */
    transition: width 3s;
    width : 80%;
}
#01.growing {
    width : 110%
}

Then when you want the transition to start, just add the class "growing" to the element.

Here is an example

Answer 2

In JQuery you can chain .animate() s to get what you want:

$('#table').animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000);

and if you want to increase the size in one step (ie. without delay):

$('#table').animate({width: $(this).width() * 1.1 + 'px'}, 4000);

Here is a demo .

Answer 3

Yes it is possible! (easiest answer all day!)

but seriously.. look into javascript smooth resizing? or if you want to use a library there are MANY MANY ui plugins that will do this for most major libraries..

jQuery is the obvious choice for most... however for something this simple I suggest looking into how to do it yourself.

here is a quick example in jQuery