Bir fonksiyon içinde nasıl ard arda iki farklı css çalıştırırım ?(Çözüldü)
Merhaba jquery veya javascript ile bir fonksiyon içinde ard arda nasıl bir css çalıştırırım
onu merak ediyorum jquery'nin animate ve trigger eventleriyle yapmaya çalıştım ama beceremedim
yapmak istediğim şu
/*Ana css böyle*/
#bg{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
}
/*Ben aşaıdaki iki kodun ard arda gerçekleşmesini istiyorum biri bitince diğeri başlasın
aynı anda değil ard arda gerçekleşsin*/
$(document).ready(function(){
$("#btn1").click(function(){
$("#bg").css({"clip-path":"polygon(0 78%, 91% 0, 47% 100%, 0 100%)","transition-duration":"1s"});
$("#bg").css({"clip-path":"polygon(0 0, 100% 0, 100% 100%, 0 100%)","transition-duration":"2s"});
});
});
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
Sonundayaptım çok şükür :)
$(document).ready(function(){
$("#btn1").click(function(){
$("#bg").css({"clip-path":"polygon(0 78%, 91% 0, 47% 100%, 0 100%)","transition-duration":"1s"});
setTimeout(function(){
$("#bg").css({"clip-path":"polygon(0 0, 100% 0, 100% 100%, 0 100%)","transition-duration":"2s"});
},1000);
});
});
2.ye ne koyarsam koyayım çalışmıyor sanki aynı div olduğu için ard arda birşey yaptıramıyorum örnek #bg1 #bg2 diye iki divim olsaydı olacaktı w3schools da
hep farklı divler üzerinden butür şeyler yapılmış ama aynı divi ard arda farklı css kodlarıyla çalıştırma olayını görmedim aslında benim yapmak istediğim
bir slayt efekti sol alt köşeden üçgen olarak sağa doğru çıkıyor sonra tüm ekranı kaplayarak yeni slayta geçiyor clip path mantığı arkdan gelen slayt
önce üçgen içinde gözükecek sonra tamamı gözükecek
