I've two divs positioned absolutly and I position them relative to each other. When width of one is change, then i recalculate and set positions. While I use css3 transition on 'width' property, when i try to get 'width' of animated one, it gives me the current value on dom. But i want to get the target value of transition to set positions correctly on begin of transition effect. Is this possible to get the target value via javascript or other ways?

EDIT

Below is a jsfiddle demonstrates my issue. It alerts '100px' but I need to get '300px'.

/

Thanks.

I've two divs positioned absolutly and I position them relative to each other. When width of one is change, then i recalculate and set positions. While I use css3 transition on 'width' property, when i try to get 'width' of animated one, it gives me the current value on dom. But i want to get the target value of transition to set positions correctly on begin of transition effect. Is this possible to get the target value via javascript or other ways?

EDIT

Below is a jsfiddle demonstrates my issue. It alerts '100px' but I need to get '300px'.

http://jsfiddle/Mdbgs/

Thanks.

• javascript
• jquery
• css
• css-transitions

• can you show us your code ? maybe you should consider creating a sample on jsfiddle to highlight the problem so we can understand your issue and try to help you with it. – trrrrrrm Commented Aug 28, 2013 at 11:25
• How do you set the width? Is it on "auto" and it automatically expands/shrinks? – Jonas Grumann Commented Aug 28, 2013 at 11:25
• let me try to create a fiddle – Halil Ibrahim Commented Aug 28, 2013 at 11:30
• I've added a fiddle to the question. Please check it. – Halil Ibrahim Commented Aug 28, 2013 at 11:36
• If you set it like that, I don't see the problem. I mean, why do you need to read it from the dom if you hardcode it in the javascript? jsfiddle/jonigiuro/Mdbgs/1 – Jonas Grumann Commented Aug 28, 2013 at 11:41

2 Answers 2

That's because .css('width') is calling getComputedStyle on the element, which does return the transitioning value. If you did directly access the style, you would get what you just had set:

document.getElementById('transition_div').style.width
$('#transition_div').prop('style').width
$('#transition_div')[0].style.width

(updated fiddle)

You could use the transitionend event: (see for equivalent prefixed vendor)

$('#transition_div').css('width', 300).on("transitionend", function () {
    alert($(this).css('width'));
});

DEMO