CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Joren
Joren

Reputation: 9925

Use jQuery's switchClass method to fade in an element?

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.

Upvotes: 0

Views: 1617

Answers (3)

JohnNotion
JohnNotion

Reputation: 13

When styling the two classes, use the opacity property. .swithClass will be able to transition smoothly between varying opacities.

Example:

   .FadeFrom {
      opacity: 0.0;
   }

   .FadeTo {
      opacity: 1.0;
   }

Upvotes: 1

gilly3
gilly3

Reputation: 91587

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.

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86892

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
  });

Upvotes: 0

Related Questions