Изменить анимацию ширины таблицы - PullRequest
Новая
       5

Изменить анимацию ширины таблицы

1 голос
/ 21 ноября 2011

Можно ли плавно анимировать ширину стола. Десять процентов в секунду было бы хорошим показателем. Так что это медленно расширяется и продолжает расширяться?

под нагрузкой <table id="01" width="80%" height="769">

1 секунда <table id="01" width="90%" height="769">

2 секунды <table id="01" width="100%" height="769">

3 секунды <table id="01" width="110%" height="769">

Ответы [ 3 ]

3 голосов
/ 21 ноября 2011

Есть несколько способов сделать это.Если вы хотите использовать браузеры, поддерживающие html5, проверьте преобразования и переходы CSS.Переходы легче использовать для того, что вам нужно.Вы можете определить свой CSS следующим образом: 

#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%
}

Затем, когда вы хотите, чтобы переход начался, просто добавьте класс «растущий» к элементу.

2 голосов
/ 21 ноября 2011

В JQuery вы можете связать .animate() s, чтобы получить то, что вы хотите: 

$('#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);

и, если вы хотите увеличить размер за один шаг (т.е. без задержки): 

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

Вот демоверсия .

1 голос
/ 21 ноября 2011

Да, это возможно! (самый простой ответ весь день!)

но серьезно .. посмотрите в JavaScript плавное изменение размера? или если вы хотите использовать библиотеку, есть МНОГИЕ МНОГИЕ плагины пользовательского интерфейса, которые будут делать это для большинства основных библиотек ..

jQuery - очевидный выбор для большинства ... однако для чего-то такого простого я предлагаю рассмотреть, как сделать это самостоятельно.

здесь - быстрый пример в jQuery

...