Geek Answers Handbook

Transitions WebKit jQuery AddClass does nothing

JQuery addclass does not add a class at all, and therefore transitions with web sets do not work. In the function below, the first add class works, and the second does not. What's happening.

Function

function closecont() { $('#contpanel').addClass('contentclosed'); $('#slideback').addClass('slideback'); }

CSS

 .gallery .content #slideback { position:absolute; background:url(images/ui/cont.png) center top; height:44px; width:24px; top:340px; left:254px; overflow:hidden; opacity:0.0;filter:alpha(opacity=0); -webkit-transition-property:opacity; -webkit-transition-duration:600ms; } .slideback { opacity:1.0;filter:alpha(opacity=100); -webkit-transition-property:opacity; -webkit-transition-duration:600ms; }

Closed content works fine..slideback not. Here is a very similar scene that I did. http://jsfiddle.net/4WmJz/15/

Any ideas.

Wonderful

+4
source share
2 answers

You forgot to add !important flags to your styles, but you used it in the first half of your violin. That is why he worked with the first element.

By default, CSS rules are applied in a specific order . More specific selectors override more general ones, so if you add a class (general) to an element, the CSS rule set for the element identifier (specific) will take precedence.

 .slideback { opacity:1.0 !important;filter:alpha(opacity=100) !important; -webkit-transition-property:opacity !important; -webkit-transition-duration:600ms !important; }

Your fixed fiddle: http://jsfiddle.net/4WmJz/16/

+5
source

Instead

 #reviews #test { opacity:0.0;filter:alpha(opacity=0); -webkit-transition-property:opacity, filter; -webkit-transition-duration:600ms ,600ms; }

Do it:

  #reviews .hidden{ opacity:0.0;filter:alpha(opacity=0); -webkit-transition-property:opacity, filter; -webkit-transition-duration:600ms ,600ms; }

Then do the following:

  <div id="test" class='hidden'>moved</div>

Andupdate js:

 $('#moveIt').click(function() { $('#dropout').addClass('dropopen'); $('#test').removeClass('hidden'); $('#test').addClass('test'); return false; });
0
source

More articles:


All Articles