Is this possible? I've tried visibility:hidden/visibility:visible and display:none/display:block on the classes to switch between, but both result in the element popping in at the end.
A:
Look here on how to implement JQuery Fading
http://api.jquery.com/category/effects/fading/
You can handle other events in the fade in and out using the call back function like this:
$('.someClass').fadeIn('slow', function() {
// run extra code here
});
$('.someClass').fadeOut('slow', function() {
// run extra code here
});
John Hartsock
2010-10-08 18:22:49
That's a callback when it's complete. What if I want something to slide from left: 50 to left: 100 while fading in using switchClass?
Joren
2010-10-08 18:39:57
Nest two elements such as DIV and start the slide and the fade separately, each on one of the elements: http://old.nabble.com/combine-slide-and-fade-td21937832s27240.html
littlegreen
2010-10-08 18:45:11
A:
Use .animate()
$("#myElement").animate({ opacity: 1, left: 0 }, 1000);
To get .switchClass() to work, you'll have to edit the jQuery code. Find function getElementStyles(). In the else, after if (typeof style[key] === 'string') { add this code:
if (key == "filter" && /^alpha\(opacity=(\d+)\)$/.test(style[key])) {
newStyle.opacity = parseFloat(RegExp.$1) / 100;
}
That should do it.
gilly3
2010-10-08 19:02:33
Yeah I know I can use animate. What I want to know is if switchClass can do alpha changes. I like switchClass because it lets you keep your animations in a css file and out of code.
Joren
2010-10-08 21:06:27
Then no. `.switchClass()` only operates on numeric values. Since, in IE8 and below opacity is not numeric (ie, `parseInt()` returns `NaN`), this value is ignored during the animation.
gilly3
2010-10-09 00:13:23
Is there any way to override the getElementStyles method instead of altering the original jquery code?
Joren
2010-10-11 21:02:25
Nope. It is a private function internal to the implementation of switchClass. You can either modify the source or write your own switchClass plugin.
gilly3
2010-10-12 00:06:36