Document.ready (işlev)

Question

olduğunda gizleme işlevi ve animasyon nasıl çalıştırılır Bu benim ilk sorum, çünkü benzer bir tane bulamıyorum çünkü. Dolayısıyla, sayfam hazır olduğunda ve aynı zamanda bir animasyon olduğunda bazı öğeleri gizlemeye çalışıyorum. Sadece işe yaramıyor. İngilizcem için özür dilerim ve Jquery için de çok yeni. http://www.jsfiddle.net Ancak

, daha kolay kendin sadece bu özelliklere sahip bir sınıf eklemek üzerinde yapmak:

$(document).ready(function(){ 
    $("#mainbox-search-main").show(); 
    $("#mainbox-search-extra").hide(); 
    $("#mainbox-login").hide(); 
    $("#mainbox-register").hide(); 
    $("#mainbox-pasfor").hide(); 
    $(".fab").animate({ 
     -webkit-transition-duration: 1s /* Safari */ 
     transition-duration: 1s 
     -ms-transform: rotate(180deg) /* IE 9 */ 
     -webkit-transform: rotate(180deg) /* Safari */ 
     transform: rotate(180deg) 
    }); 
}); 

Answer 1

Bir JSFiddle olmadan çoğaltmak zor:

JQuery Burada kodunu görmek

$(".fab").addClass('animate-it'); 

CSS

.animate-it{ 
    -webkit-transition-duration: 1s /* Safari */ 
    transition-duration: 1s 
    -ms-transform: rotate(180deg) /* IE 9 */ 
    -webkit-transform: rotate(180deg) /* Safari */ 
    -moz-transform: rotate(180deg) /* Firefox */ 
    transform: rotate(180deg) 
} 

Ayrıca, belge yüklendiğinde hiçbir öğeyi gizlemeniz gerekmez. Sadece başlangıçta bu ekranları none'a ayarlayın.

#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{ 
    display:none; 
} 

bunları göstermek istiyorum

, sadece #mainbox-search-main elemanı için kullandık show() yöntemini kullanın.

Ben de davada animasyona bir gecikme eklemek isteyebilirsiniz işaret etmek istiyorum Gereksiz Lag Zaman adresleme

orada zaman animasyon yangınlar arasında bazı istenmeyen gecikme zamanı ve DOM kabul edilir yüklenecek.

$(".fab").delay(500).addClass('animate-it'); 

Sonuç: Geri arama Fonksiyon gizli elemanları CSS'de bakılıyor ile

ekleme, birlikte çalıştığımız için kod daha kısa miktarda var.

$(document).ready(function(){ 
    $("#mainbox-search-main").show(function(){ 
     $(".fab").delay(500).addClass('animate-it'); 
    }); 
});