Question

I try to create a css3 transition effect on my page but i need to transition start on load with jquery so i write this:

#igrac1 {
    width:120px;
    height:100px;
    float:left;
    border:2px solid;
    border-color:#FFF;  
  border-radius:5px;  
  box-shadow:0 0 5px rgba(0,0,0,0.4);  
  -moz-box-shadow:0 0 5px rgba(0,0,0,0.4);  
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
    background-color:#F00;
}
.css {
    background:#000000;
}

    </style>
<script type="text/javascript">

$(document).ready(function() {
    $('#igrac1')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

</script>

and offcource:

<div id="igrac1" class="css"></div>

in body tag… but no working on load. WHY is that?

Answer 1

$('#igrac1').fadeOut(10).delay(200).fadeIn();

You can also try this:

.css {
    background:  #000000;
    display: none;
}

and then

$('#igrac1').fadeIn();