CSS3 transition not working initially when triggering via jQuery

Question

I'm using jquery to trigger with a div's hover another div's resize:

$("#lggroup").hover(function()
{
    $("#register").css("width", "200px");
}, function()
{
    $("#register").css("width", "0px");
});

The second div has a transition effect upon it that doesn't affect the change initially but it does after the second hover.

transition: width 0.25s;

Although not breaking, the sudden width expand has an unpleasing effect.

Fiddle: https://jsfiddle.net/tu9keje5/1/

You can see that initially after running the fiddle, the main div expands suddenly because of the gray div expanding suddenly. Afterwards the transition kicks in fine. Any workarounds or causes for this?

Alex · Accepted Answer · 2015-08-21 09:44:28Z

3

You should give #register an initial width value:

#register {
    transition:width 0.25s;
    width: 0px;
}

working fiddle

answered Aug 21, 2015 at 9:44

Alex

10.3k6 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Propolys Over a year ago

Neat, so jquery/javascript should have an initial value for a css (edit: a defined initial value)

Alex Over a year ago

the initial value is undefined :)

fray88 · Accepted Answer · 2015-08-21 09:50:39Z

1

Your problem is with the CSS, you are trying to animate the width, but the initial with doesn't exist and so there's no animation. For the second time you do it, the width does exist and animates. Change your register css for this (I also placed a height equal to the other divs):

#register
{
    width:0;
    height:400px;
    transition:width 0.25s;
}

The fiddle: https://jsfiddle.net/tfcrdjka/

edited Aug 21, 2015 at 9:50

answered Aug 21, 2015 at 9:48

fray88

8201 gold badge7 silver badges23 bronze badges

2 Comments

Alex Over a year ago

# is an id, not a css class

fray88 Over a year ago

Sorry, my fault writing that

Collectives™ on Stack Overflow

CSS3 transition not working initially when triggering via jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related