JQuery анимировать с процентами - PullRequest
3 голосов
/ 28 ноября 2011

Можно ли как-нибудь анимировать div, используя проценты с помощью jquery?

Я пробовал это:

$('.box1').animate({width:($(".wrapper").width()*.100)},"fast");})
$('.box1').animate({width:'100%'},"fast");})
$('.box1').animate({width:100%;})

ничего из вышеперечисленного не работает ...

есть идеи?

UPDATE

var p_e_h= 1.0;
var p_e_w= 1.0;
 $('.box1').animate({width:($(".wrapper").width()* p_e_w)},"fast");
       $('.box1').animate({height:($(".wrapper").height()* p_e_h)},"fast");

ширина работает, а высота - нет. Если я не нажму кнопку еще раз.

1 Ответ

6 голосов
/ 28 ноября 2011
var fiftyPrct = 0.5, //50%
    hundredPrct = 1; //100%

$('.box1').animate({ width: ($('.wrapper').width() * fiftyPrct) }, 'fast');
$('.box2').animate({ width: ($('.wrapper').width() * hundredPrct) }, 'fast');

Должно работать нормально.

Обновление

Поскольку вы делаете 2 разных вызова .animate, анимации ставятся в очередь и выполняются последовательно.Просто выполните их с помощью одного и того же анимационного вызова:

var p_e_h= 1.0;
var p_e_w= 1.0;

$('.box1').animate({
    width: ($(".wrapper").width() * p_e_w),
    height:($(".wrapper").height() * p_e_h)
},"fast");

Пример работы: jsFiddle

...