Лучший способ угасать при загрузке анимации css3

У меня возникла проблема с фактической загрузкой fade в/из 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

ответ

Смежные вопросы