0

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?

4

2 に答える 2

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

これを試すこともできます：

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

その後

$('#igrac1').fadeIn();
于 2012-05-07T14:12:06.993 に答える
0

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();    
});​
于 2012-05-07T14:20:30.867 に答える