CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
Irakli Lekishvili
Irakli Lekishvili

Reputation: 34158

jquery. changing div width with animation does not works

Hello everybody i have variable(widthPercent) where i store percent for example: 67.33%

when i trying to change width with jquery animation it does not works :

$(this).animate({
        width: widthPercent,
    }, 2500);
});

but changing width with css working good:

$(this).css('width', widthPercent);

does anyone have idea what is my problem?

Upvotes: 1

Views: 500

Answers (4)

Belladonna
Belladonna

Reputation: 3862

Is this what you mean:

jQuery:

$('#foo').click(function(){
    var widthPercent = '66%';
    $(this).animate({
        'width': widthPercent,
    }, 2500);
});

CSS:

#foo{
   width:300px;
   background:#ff0000;
   height:100px;   
}

JSFiddle.

Upvotes: 0

Brandt Solovij
Brandt Solovij

Reputation: 2134

http://api.jquery.com/animate/

var widthPercent = "35%";

$(this).animate({
        width: "'"+widthPercent+"'"   // YOU ALSO HAD AN EXTRA COMMA HERE MEANING IT WAS EXPECTING ANOTHER ARGUMENT -- extra quotes may or may not be necessary depending on what your actual variable looks like
    }, 2500);
});

http://jsfiddle.net/A2bdQ/5/

also be sure to use quotes when using a % sign otherwise it may be treated as an inline mod operation

Upvotes: 1

porfiriopartida
porfiriopartida

Reputation: 1556

maybe you need to quote the widthPercent

this worked for me

$(document).ready(
                function(){
                    var widthPercent = "35%";
                    $("#btn").click(
                    function(){

                        $(this).animate({
                            width: widthPercent,
                        }, 2500);
                    });
                }
            );

the problem should be in your widthPercent definition.

Upvotes: 2

Gene Golovchinsky
Gene Golovchinsky

Reputation: 6131

You need to add a '%' character to the width value, like this:

$(this).css('width', widthPercent + '%')

Here's a jsfiddle illustrating it.

Upvotes: 0

Related Questions