CODEWITHSUNDEEP
javascriptjquerycss
MythThrazz
MythThrazz

Reputation: 1647

How to add animation to the element's css attributes when the class changes with jQuery?

The problem:

I have a HTML element which has a class hidden which sets the css attribute display: none;. When I remove the class with the JS the element becomes immediately visible (the original display value is restored). What I would like to be able to set the duration of the "showing up" animation, like I could with: $('.hidden').show(1000) or $('.hidden').fadeIn(1500). I tried to chain with .animate() but it didn't work.

The limitations

  1. It can't mess with the inline CSS of the element (especially it can't set the display: block)
  2. It should behave similar to the jQueryUI removeClass: http://jqueryui.com/removeClass/

The question:

How to make the changes to be animated (have a duration > 0) when I remove(change) the class of the HTML element?

The code:

CSS:

.hidden{
display: none;
}

HTML

<div class="hidden"> Lorem ipsum </div>

JS

$('.hidden').removeClass('hidden')

Upvotes: 1

Views: 2749

Answers (6)

Htam
Htam

Reputation: 21

I think you talking about jquery's delay function:

$('.hidden').removeClass('hidden').delay(1000).addClass('hidden')

Upvotes: 0

Shikiryu
Shikiryu

Reputation: 10219

http://jsfiddle.net/DU2Wg/1/

With your HTML & CSS, you could use this JS :

$('.hidden').css({ // Change your CSS directly to
    display: 'inline', // the display you want
    opacity: 0 // 100% transparent
})
.stop() // Recommended because it pauses any previous animation so there is no conflict between two animations simultaneously
.animate({ // Will change your CSS over time
    opacity: 1 // 100% opaque
}, 2000, // in 2 secs
function(){
    var $this = $(this)
    $this.removeClass('hidden'); // Will remove your class (only if you want to use it once)
    alert($this.css('display')); // Will alert "inline", your current display on that element
});

Upvotes: 1

kapricanon
kapricanon

Reputation: 179

Why can't you use $('.hidden').fadeIn(1500)?

JSFiddle

Upvotes: 0

Armel Larcier
Armel Larcier

Reputation: 16027

If you need this animation to run in modern browsers, use css transitions!

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

In JS you can set the classes like this :

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

Unfortunately, unless you'll have to use setTimeout. If you dont, both class changes will be interpreted in the same time and no animation will occur.

EDIT

You might be able with less code if you modify the hidden class's rule :

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

Now you have only 1 class to add with JS :

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);

Upvotes: 0

Salketer
Salketer

Reputation: 15711

$('.hidden').show(1000,function(){$(this).removeClass('hidden').css('display','');});

This will display it using an animation, once the animation is done we remove the class...

Upvotes: 0

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

You remove the class that you need to fade it thats the mistake

you can try this Example

HTML

<h1 class="hide" style="display:none; ">Display</h1>

JS

$(function () {
$(".hide").fadeIn('slow');
});

Upvotes: 0

Related Questions