Is there any way i can animate a div using percentages with jquery?

I've tried these:

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

none of the above work...

any ideas?

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");

width works, but height does not. Unless i click the button again.

Is there any way i can animate a div using percentages with jquery?

I've tried these:

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

none of the above work...

any ideas?

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");

width works, but height does not. Unless i click the button again.

• javascript
• jquery
• jquery-animate

• 1 width: 100%; would be treated as trying to take the modulo of 100 using a semicolon as the divisor - a syntax error. – Marc B Commented Nov 28, 2011 at 17:16
• 6 *.100 is not really 100%. – pimvdb Commented Nov 28, 2011 at 17:17

1 Answer 1

var fiftyPrct = 0.5, //50%
    hundredPrct = 1; //100%

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

Should work fine.

Update

Since you are doing 2 different .animate calls, the animations are queued and executed sequentially. Just do them with the same animation call:

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");

Example of it working: jsFiddle