CODEWITHSUNDEEP
jquerycss
Christian
Christian

Reputation: 4104

How to get the property of an element after transformation?

I am doing a transformation of the width of an element. In my jquery I add a class, and in the css I describe the transformation. If I query now with jquery the width of this element after adding the class I get the current width of this element, but this is not the final width of it. How do I get the final width? Is there an event, transformation finished or something like this? Should I use a timeout or jquery watch?

/kind regards Christian

EDIT: Even better now: JSFiddle

On the first click the method width() returns 100, after the transformation it returns 200. How to get the result on the first click?

Upvotes: 2

Views: 160

Answers (1)

Wil
Wil

Reputation: 540

Make sure the element you are transforming has a display type of block (display: block), otherwise you can't modify the width of the element.

Html:

<a href="#">Bigger</a>

Jquery:

$('a').click(function(e){
    console.log($(this).width());
    $(this).addClass('bigger');
    console.log($(this).width());
});

CSS:

a {
    width:100px;
    background: #ccc;
}
.bigger {
    width: 200px;
}

Upvotes: 2

Related Questions