CODEWITHSUNDEEP
jquerycsscss-transitions
Alvaro
Alvaro

Reputation: 41595

CSS3 transition with jQuery only working after a pause?

I am trying to add a CSS3 transition with jQuery changing the CSS properties of an style. (I would like to do it with transform3d but the properties are dynamic...)

It might be a very stupid thing but I don't know why, if I do an alert before the update of CSS properties, the CSS3 transition works well. If not, it doesn't.

I have a jsfiddle here with the example, just comment the alert if you want to see what I mean: http://jsfiddle.net/7WPT8/1/

The code used to update the CSS is:

//topPosition is the dynamic value
$(this).css('top', topPosition+'px');

It only works if I use an alert before.

Upvotes: 2

Views: 477

Answers (2)

C3roe
C3roe

Reputation: 96151

Sven is right, it is a timing issue. It can also be avoided by using a minimal timeout to trigger the change of the css property (in case having the flashmessage in the document from the start is not an option) – check http://jsfiddle.net/7WPT8/5/

(I’m using a var _this here to pass the jQuery element to the anonymous function via closure – otherwise, it would not know what $(this) is because of the separated execution via timeout.)

Upvotes: 2

dersvenhesse
dersvenhesse

Reputation: 6404

You're creating the element and directly calling the function showFlash() afterwards where you are using the element. There might be a time issue in the sequence, the alert() breaks the current sequence and so it works.

To prevent this in a simple way, add your div diretly to your content.

http://jsfiddle.net/7WPT8/4/

Upvotes: 2

Related Questions