[]
jQuery (background geçişi)
ben derdimi şöyle anlatayım:
30 saniyede bir load yiyen bir div'im var. sürekli güncelleniyor yani, php dosyasından.
şimdi, bu php dosyasında, belli bir şart yerine geldiğinde, div'i geçişli bassın istiyorum. normalde div'in arka planı beyaz. bu şart gerçekleştiğinde, div arka planı sarı olsun, ve 15-20 saniye içinde ağır ağır beyaz renge geri dönmeye başlasın?
böyle bir işlemi nasıl yapabilirim?
yani şöyle diyelim:
if($a = 1){
echo "<div class='normal'></div>";
}else{
echo "<div class='gecisli'></div>
}
olsun ve bu geçişli dediğim de, yukarıda anlattığım olayı yapsın.
ama nasıl yapsın?
30 saniyede bir load yiyen bir div'im var. sürekli güncelleniyor yani, php dosyasından.
şimdi, bu php dosyasında, belli bir şart yerine geldiğinde, div'i geçişli bassın istiyorum. normalde div'in arka planı beyaz. bu şart gerçekleştiğinde, div arka planı sarı olsun, ve 15-20 saniye içinde ağır ağır beyaz renge geri dönmeye başlasın?
böyle bir işlemi nasıl yapabilirim?
yani şöyle diyelim:
if($a = 1){
echo "<div class='normal'></div>";
}else{
echo "<div class='gecisli'></div>
}
olsun ve bu geçişli dediğim de, yukarıda anlattığım olayı yapsın.
ama nasıl yapsın?
css den halledersin. kodlarını da yazayım da tam olsun, renkeri ve süreyi istediğin gibi değiştirirsin;
<style type="text/css">
@keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-ms-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-moz-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-webkit-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-o-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
.gecisli{
background-color:white;
animation: efekt 15s linear;
-ms-animation: efekt 15s linear;
-moz-animation: efekt 15s linear;
-webkit-animation: efekt 15s linear;
-o-animation: efekt 15s linear;
}
</style>
<style type="text/css">
@keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-ms-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-moz-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-webkit-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
@-o-keyframes efekt {
0% { background-color:yellow; }
100% { background-color:white; }
}
.gecisli{
background-color:white;
animation: efekt 15s linear;
-ms-animation: efekt 15s linear;
-moz-animation: efekt 15s linear;
-webkit-animation: efekt 15s linear;
-o-animation: efekt 15s linear;
}
</style>
- gozyakansakiz (20.08.13 01:32:12 ~ 01:32:33)
1