Remove class, but slowly?

Question

So I am using jQuery to remove a class from an element, but it does it immediately. What I'd like is to have the class fade out smoothly, not so harsh.

This is the code I tried, which is not fading out at all:

    $(function() {
$( "a.engine" ).click(function() {
  $( "img.bg" ).removeClass( "intro_effects", 1000 );
  });
});

Any hints as to how to make this fade out?

Thanks much!

* HERE IS THE SITE

http://dev.mediaslave.ca/illustraflex/

Thanks again!

Answer 1

This CSS should animate the properties when you change the class, and you can control it with the transition duration property.

img.bg {
    transition-property: all;
    transition-duration: 1s;
}

Answer 2

You'll need to use .animate to change the css properties, and then use .removeClass when the animation is complete.

Answer 3

$("a.engine").click(function() {
    $("img.bg").fadeOut( "slow", function() {
        // Animation complete 
    });
});

Answer 4

jQuery UI lets you do that with its removeClass: http://jqueryui.com/removeClass/

Answer 5

Rather than using removeClass, try using fadeOut instead. Something like this should work for you:

$(function() {
  $( "a.engine" ).click(function() {
    $( "img.bg" ).fadeOut();
  });
});

Answer 6

Classes are not properties with transitions. They are either on, or they are off. So if you want something to fade out AND remove the class, you simply need two different commands... like so:

$(function() {
    $("a.engine").click(function(){
        $("img.bg").fadeOut(1000, function(){$(this).removeClass("intro_effects", 1000)});
    });
});

See it in action here: http://jsfiddle.net/Y92qu/1/