jquery - 加载时的 css3 过渡

Question

我尝试在我的页面上创建一个 css3 过渡效果，但我需要使用 jquery 在加载时开始过渡，所以我这样写:

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

和场外:

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

在 body 标签中......但没有加载。这是为什么？

Answer 1

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

你也可以试试这个:

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

然后

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