Как получить свойство элемента после преобразования?

Question

Я делаю преобразование ширины элемента. В моем jquery я добавляю класс, а в css я описываю преобразование. Если я теперь запрашиваю с помощью jquery ширину этого элемента после добавления класса, я получаю текущую ширину этого элемента, но это не окончательная ширина этого элемента. Как мне получить окончательную ширину? Есть событие, преобразование закончено или что-то в этом роде? Должен ли я использовать часы тайм-аут или JQuery?

/ С уважением Christian

EDIT: Еще лучше: JSFiddle

При первом щелчке метод width () возвращает 100, после преобразования возвращает 200. Как получить результат по первому щелчку?

Answer 1

Убедитесь, что элемент, который вы преобразовываете, имеет тип отображения блока (display: block), иначе вы не сможете изменить ширину элемента.

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;
}