最好的淡入淡出加載css3動畫的方法

我面臨的問題實際加載淡入/出一個div有一個基於css3的登錄動畫，當一個函數加載。我有jsfiddle設置，但我仍然無法使它工作。任何幫助，將不勝感激！最好的淡入淡出加載css3動畫的方法

http://jsfiddle.net/adamchenwei/v4CK6/4/

HTML

<!DOCTYPE html> 

<body> 

    <div class="loading"> 
     <div class="loading_ball_outside"><div class="loading_inside"></div></div> 
    </div> 

    <div class="section play"> 
     <h1>PLoad CSS 2 Anywhere--FAILED</h1> 
     <div class="play_content"> 
     <button class="play_button" id="1">Play1</button> 
     <button class="play_button" id="1">Play2</button> 
     <button class="play_button" id="1">Play3</button> 
     <button class="play_button" id="1">Play4</button> 
     <p>Something in Play ...</p> 
     <div class="play_respond" > 
     <table class="play_respond" width="100%" border="1" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      </tr> 

     </table> 

     </div> 

     </div><!--class="play_content" END--> 
    </div><!--class="play" END--> 

</body> 
</html>

CSS

.loading_ball_inside { 
    background-color: rgba(0,0,0,0); 
    border:5px solid rgba(0,183,229,0.9); 
    opacity:.9; 
    border-top:5px solid rgba(0,0,0,0); 
    border-left:5px solid rgba(0,0,0,0); 
    border-radius:50px; 
    box-shadow: 0 0 35px #2187e7; 
    width:50px; 
    height:50px; 
    margin:0 auto; 
    -moz-animation:spin .5s infinite linear; 
    -webkit-animation:spin .5s infinite linear; 
} 

.loading_ball_outside { 
    background-color: rgba(0,0,0,0); 
    border:5px solid rgba(0,183,229,0.9); 
    opacity:.9; 
    border-top:5px solid rgba(0,0,0,0); 
    border-left:5px solid rgba(0,0,0,0); 
    border-radius:50px; 
    box-shadow: 0 0 15px #2187e7; 
    width:30px; 
    height:30px; 
    margin:0 auto; 
    position:relative; 
    top:-50px; 
    -moz-animation:spinoff .5s infinite linear; 
    -webkit-animation:spinoff .5s infinite linear; 
} 

.loading { 
    position: absolute; 
    /*left: 50%; /*the positioning you're looking for.*/ 
    top: 50%; /* edit these values to give you*/ 
    display: none; 

} 

@-moz-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 
@-moz-keyframes spinoff { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(-360deg); } 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(360deg); } 
} 
@-webkit-keyframes spinoff { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(-360deg); } 
}

JQuery的

$(document).ready(function(){ 
//play_pickparentclass BEG 
    $(document).on('click','.play_button',function(){  
     loaderOn(); 
     loaderOff(); 
    });//play_pickparentclass END 

    function loaderOn(){ 
     ('.loading').fadeIn('slow'); 
    }; 
    function loaderOff(){ 
     ('.loading').fadeOut('slow'); 
    }; 



});//$(document).ready(function() END

來源

2013-08-26 Ezeewei

function loaderOn(){ 
     $('.loading').fadeIn('slow'); 
    } 
    function loaderOff(){ 
     $('.loading').fadeOut('slow'); 
    }

全碼：

$(document).ready(function(){ 
    function loaderOn(){ 
     $('.loading').fadeIn('slow'); 
    } 
    function loaderOff(){ 
     $('.loading').fadeOut('slow'); 
    } 
//play_pickparentclass BEG 

$(".play_button").click(function(){  

     loaderOn(); 
     loaderOff(); 
    });//play_pickparentclass END 

});//$(document).ready(function() END

演示：http://jsfiddle.net/v4CK6/7/

您可以使用控制檯檢查什麼是錯的

來源

2013-08-26 15:34:33

它你想要的都一樣使用 –

這是因爲你忘了使用jQuery :)

嘗試添加$它會起作用。像這樣：http://jsfiddle.net/v4CK6/6/

來源

2013-08-26 15:34:07 skip405

最好的淡入淡出加載css3動畫的方法

回答

相關問題