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>

和offcource：

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

在body标签中......但没有加载工作。为什么会这样？

Answer 1

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

你也可以试试这个：

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

然后

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

Answer 2

将display:none;添加到ID。然后fadeIn()，见工作示例

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();    
});

css3负载转换

2 个答案: