DanielGibbs DanielGibbs - 7 months ago 17
jQuery Question

Hiding and fading in an element in jQuery behaving weirdly due to CSS transition duration

I have an element (a circle) that I would like to add to the page and fade in. I am using the following jQuery to do this:

var circle = $("<div id=\"circle\"></div>");

Initially this works fine. I've then added the some CSS to the circle to change its size when it is hovered over or clicked and made this animate by adding
transition-duration: 0.2s;
to the circle.

Now, when the fade in happens the circle appears instantly, fades out somewhat and then fades in; presumably due to
using its transition duration. JSFiddle demonstrating the problem.

Is there a simple way to either:

  1. Add the circle element initially hidden and fade it in, or

  2. Handle the animation of the circle's size in jQuery instead of using CSS


You can just be more restrictive in your CSS transition property.
Currently, setting only the transition-duration: 0.2s is like setting a transition: all .2s 0s ease.

You can choose to animate only the properties you need :

var circle = $("<div id=\"circle\"></div>");
html {
	background-color: #000;
#circle {
	border-radius: 50px;
	width: 100px;
	height: 100px;
	background-color: #fff;
  /* change just this line */
    transition: width .2s, height .2s, border-radius .2s;
	cursor: pointer;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
#circle:hover {
	border-radius: 60px;
	width: 120px;
	height: 120px;
#circle:active {
	border-radius: 55px;
	width: 110px;
	height: 110px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>