Applying new css to elements with jQuery, how to add transition?

Question

I've got this jQuery rule to set .preloader to display none

$(".preloader").css("display", "none");

I How ever I want it to disappear with fade out effect and also while it's fading zoom out, I don't know how to do zoom out effect, but I tried applying this to make it fade out

$(".preloader").css("display", "none").fadeOut("200");

How ever that didn't work. Can you please suggest how to achieve those two effects? Also, will solution work vice versa? (fade it in, and zoom it in until it's original sizes)

you cannot fade a display none, fade out simply changes the opacity levels — David Chase
– David Chase, Commented Apr 10, 2013 at 21:06

Konstantin Dinev · Accepted Answer · 2013-04-10 21:06:56Z

3

In order to fade it out, just use fadeOut(). The end of the animation is actually setting a display: none to the element:

$(".preloader").fadeOut("200");

answered Apr 10, 2013 at 21:06

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 2 · Accepted Answer · 2013-04-10 21:32:30Z

2

$(".preloader").toggle('hide'); and $(".preloader").toggle('show'); should do it, but $.toggle() by itself works if you don't care what the display state is.

However,

$(".preloader").stop(true,false).animate({
    width: 'toggle',
    height: 'toggle',
    opacity: 'toggle'
});

is way cooler, and you only need one statement. You could use a boolean with $.toggle(yourShowStateBooleanVariableGoesHere), too.

Also, I recommend you use id rather than class selectors unless it absolutely has to be applied to all classes (which I find rare).

edited Apr 10, 2013 at 21:32

answered Apr 10, 2013 at 21:07

user1382306

2 Comments

Ilja Over a year ago

cool, what could be opposite of toggle? so to display things?

user1382306 Over a year ago

@IlyaKnaup you should be hooked up to go both directions now. toggle and the animation is the only way to get the "zoom". if you want "real" zoom, let me know, and I'll do css3 for you

This_is_me · Accepted Answer · 2013-04-10 21:06:35Z

2

$(".preloader").css("display", "none").fadeOut("200");

this code first hides the .preloader and than tries to fadeOut wich is impossable because its already hidden.

try this:

$(".preloader").fadeOut(200);

or

$(".preloader").fadeOut("fast");

answered Apr 10, 2013 at 21:06

This_is_me

9181 gold badge9 silver badges20 bronze badges

Comments

Daniel · Accepted Answer · 2013-04-10 21:07:58Z

0

$(".preloader").hide().fadeIn("200");

$(".preloader").fadeOut("200");

answered Apr 10, 2013 at 21:07

Daniel

4,9643 gold badges30 silver badges33 bronze badges

2 Comments

Daniel Over a year ago

Not to my knowledge. See the jquery docs for hide() and show(). They work instantly, unless given a time as parameter. They also have a callback function. api.jquery.com/hide

nkkollaw Over a year ago

Definitely. The docs don't say it would work at all, but for some reason I remember having done something like that and it worked... My memory's getting bad I guess :-)

Bryce · Accepted Answer · 2013-04-10 21:08:24Z

0

When the fadeOut effect completes it sets the display to none for you, so you dont need the css method.

answered Apr 10, 2013 at 21:08

Bryce

1066 bronze badges

Comments

Frisbetarian-Support Palestine · Accepted Answer · 2013-04-10 21:10:48Z

0

$(document).ready(function(){
    $(".preloader").hover(function(){
        $(".preloader").fadeOut();
    }, function(){
         $(".preloader").fadeIn();   
    });
});

http://jsfiddle.net/BY3tz/8/

This should give you some hints.

answered Apr 10, 2013 at 21:10

Frisbetarian-Support Palestine

1,3011 gold badge13 silver badges29 bronze badges

Comments

Marcel Gwerder · Accepted Answer · 2013-04-10 21:21:14Z

0

If you also want a zoom out, this could be a possible sollution:

$('.preloader').animate({width: 'toggle', height: 'toggle', opacity: 'toggle'}, 1000);

Use the same to get it back.

Have a look at the fiddle.

edited Apr 10, 2013 at 21:21

answered Apr 10, 2013 at 21:13

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

Applying new css to elements with jQuery, how to add transition?

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related