Question

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!

Answer 1

.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