Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

define css properties with jquery before using css transition issue

define css properties with jquery before using css transition issue

Problem

I've found that there seems to be a problem using css transitions properties when they are initially set to auto. To circumvent this I've set the Initial Css Properties using jquery, before adding the css transition property.

The issue I'm having is that when I define the transitional properties immediately after setting the initial Css Properties, I get weird behaviour. EXAMPLE: http://jsfiddle.net/3zUDc/10/

However, when I delay setting the transitional properties by a few milliseconds, I get the intended behaviour, but the code seems uglier. EXAMPLE: http://jsfiddle.net/3zUDc/9/

Is there a way to accomplish the behaviour seen in the second example without putting the css transitions and destination parameters in the setTimeout block?

Thanks for any help!

Problem courtesy of: Tuck

Solution

.show() is an answer...

$('a:first').click(function(){
    $(this).css({'width': $(this).width() / $(this).parent().width() * 100 + '%', 'height': $(this).height()});
    $('a:first').show().css({
        '-webkit-transition': 'all 3s', 
        '-moz-transition': 'all 3s', 
        width: '100%', 
        height: '100px', 
        backgroundColor: 'black'
    });
});

Here is the jsfiddle demo

Solution courtesy of: Wazzzy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

define css properties with jquery before using css transition issue

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×