jquery - CSS transition causes lag -

jquery - CSS transition causes lag -

the transition within of box class causes jquery lag, if page refreshed few times lag not appear. if remove transition, lag not appear @ all, way of keeping css transition without initial lag?

jsfiddle

css:

html { background:url("http://www.phactr.com/css/img/background.jpg"); } .box { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0))); /* chrome,safari4+ */ width: 230px; height: 230px; border-radius: 100%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); transition: .33s ease; } .box:hover { width: 250px; height: 250px; } .over { -webkit-filter: blur(3px) opacity(0.3); }

jquery:

$(document).ready(function () { $("#one").click(function () { settimeout(function () { $("#one, #two, #three").addclass("over", "blind"); }, 10); }); });

you can prevent transition when clicked note disable transition when hovered 1 time again on class.

.over { transition: none; -webkit-filter: blur(3px) opacity(0.3); }

to maintain transition,

$(document).ready(function () { $("#one").click(function () { settimeout(function () { $("#one, #two, #three").addclass("over", "blind").show().delay(100).css('transition', '0.33s ease'); }, 10); }); });

http://jsfiddle.net/ukx4u/165/

the .show() used 'animated' delay , update transition. not unsure why have timeout function, can removed if not doing don't know of. left in because had in original code

jquery css transition gradient lag