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>

在身体标签中......但没有工作负载。这是为什么？

Answer 1

add display:none; to the id. then fadeIn(), see working example

http://jsfiddle.net/efortis/UfTQd/

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

    /*note this line*/ display:none;
}​


$(document).ready(function () {
   $('#igrac1').fadeIn();    
});​

Answer 2

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

你也可以试试这个：

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

接着

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