CODEWITHSUNDEEP
jqueryhtmlcssfadeinfadeout
nicael
nicael

Reputation: 19024

Why fadeIn doesn't work?

I'm trying to fade in from 0.5 opacity to 1.0 opacity. But it doesn't work.

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(400);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

But fading out from 0.5 opacity to 0 works:

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeOut(400);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Why is it?

Upvotes: 2

Views: 4596

Answers (5)

Mooseman
Mooseman

Reputation: 18891

This very much seems like a bug to me; something to do with the fact that you're attempting to fadeIn an element which is already visible - fadeIn considers an element with opacity of 0.5 to be visible because it checks for the display property (in this case it is block, not none), not for opacity. If

fadeOut also checks for display property. As it is not none, fadeOut thinks that this element is visible (it doesn't matter what opacity this element has). So fadeOut does work in this case.

To achieve the effect you want, try using fadeTo instead:

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeTo(400,1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Upvotes: 8

Neve12ende12
Neve12ende12

Reputation: 1194

It seems fadeIn & fadeOut only work off the display property. Another option besides fadeTo would be to animate the opacity.

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.animate({opacity:1},1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16839

JQuery's fadeIn() and fadeOut() does not change the opacity with numeric values... Instead it uses animation keywords:

Reading the uncompressed latest JQuery script:

jQuery.each({
    slideDown: genFx("show"),
    slideUp: genFx("hide"),
    slideToggle: genFx("toggle"),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" },
    fadeToggle: { opacity: "toggle" }
}

It uses the keywords show and hide in an animate() method, which checks for the element's state before applying the effect... Since your element is already visible, the show animation will not have an effect...

When using fadeOut() however, the hide keyword will have an effect since the element is not yet hidden.

Upvotes: 3

jmore009
jmore009

Reputation: 12931

It's because your element is already visible so fadeIn doesn't serve a purpose. You can set display: none in your css to start the element as hidden so that it can fade in.

FIDDLE

Upvotes: -1

Michał Kutra
Michał Kutra

Reputation: 1202

You should add display: none to your example

$(document).ready(function(){

    setTimeout(function(){
        var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(2500);
    },1000)
})
.box {opacity:0;display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Upvotes: -1

Related Questions