jQuery ile Array diziyi her n saniyede bir div'e append etmek
Selamlar,
elimde birden fazla elemanın bulunduğu bir dizi değişkeni mevcut.
Örnek vermek gerekirse:
var dizi = ["Birinci Eleman", "İkinci Eleman", "Üçüncü Eleman"];
Bir de, html anasayfamda, "#dizi-buraya" ID'si ile bir div mevcut.
Yapmak istediğim şey:
Her 5 saniyede bir, "dizi" değişkenimdeki elemanları "sırasıyla" ekrana fade efektiyle yazdırıp-söndürerek, sıradaki diğer dizi elemanını göstermek istiyorum.
Yani dizimde 3 eleman varsa, hedefteki ID div'e sırasıyla
- eleman append edilip, fadeIn ekranda gösterilecek, fadeOut olarak ekrandan çıkartılacak. Bu süreç 5 saniye sürecek.
- hedef div boşaltılacak, bu sefer sadece sıradaki 2. eleman aynı şekilde 5 saniye gösterilecek ve hedef div'den temizlenecek.
- dizinin son elemanı olan üçüncü eleman da, diğer adımlardaki gibi 5 saniye fadeIn-fadeOut olarak gösterilecek.
ve dizide gösterilecek eleman kalmayınca, işlem bitmiş olacak.
Bir çok yol-yöntem denedim, ancak hiçbirisi verimli çalışmadı.
Şimdiden teşekkürler
const arr = ["Birinci Eleman", "İkinci Eleman", "Üçüncü Eleman"];
const targetDiv = $("#dizi-buraya");
let index = 0;
const delay = 1500
function showNextElement() {
if (index < arr.length) {
targetDiv.html(arr[index]);
targetDiv.fadeIn(delay);
setTimeout(function() {
targetDiv.fadeOut(delay, function() {
targetDiv.empty();
index++;
showNextElement();
});
}, delay);
}
}
showNextElement();