Search code examples
jqueryhtmlcssfadeinfadeout

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?

Solution

  • 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>