jquery bilan rasm yuklanishini kechiktirish

Men bir-birining ortidan yuklanadigan to'rtta div bor,

div1 1 sekund ichida yuklanadi

3 soniya ichida div2 yuklaydi

5 soniya ichida div3 yuklang

7 sekund ichida div4 yuklaydi

Menda kod bor

function runAnimation() {

    $('#main-div').fadeIn(1500, function(){
        $('#first-div').fadeIn(1500, function() {
            $('#second-div').fadeIn(3000, function(){
                $('#third-div').fadeIn(6000, function() {

                });
                $('#fourth-div').fadeIn(12000, function() {

                });
            )};
        });
    };

Men buni to'g'ri qilganimga ishonchim komil emas, kimdir bu nima uchun ishlamasligini va o'rnak ko'rsatishi mumkinligini tushuntira oladimi?

0
Siz istagan narsangizning kodi sizning kodingizga mos kelmaydi va aniq emas. "Div2" ni "div1" tugallangandan so'ng 3 soniyadan keyin yoki runAnimation() dan so'ng 3 soniyadan keyin yuklashni xohlaysizmi? "1500" - 1,5 soniya. "12000" 12 sekund ...
qo'shib qo'ydi muallif Mike McCaughan, manba
Siz istagan narsangizning kodi sizning kodingizga mos kelmaydi va aniq emas. "Div2" ni "div1" tugallangandan so'ng 3 soniyadan keyin yoki runAnimation() dan so'ng 3 soniyadan keyin yuklashni xohlaysizmi? "1500" - 1,5 soniya. "12000" 12 sekund ...
qo'shib qo'ydi muallif Mike McCaughan, manba
bu ishlamasligi sabablari ko'p. Nashr qilganingiz bilan hech narsa aniq emas. Faqatgina taxmin qilish mumkin, ehtimol vaqt kerakmi? Hujjatda tayyorlangan runAnimation() deb nom olganini tekshiring
qo'shib qo'ydi muallif stackoverfloweth, manba
bu ishlamasligi sabablari ko'p. Nashr qilganingiz bilan hech narsa aniq emas. Faqatgina taxmin qilish mumkin, ehtimol vaqt kerakmi? Hujjatda tayyorlangan runAnimation() deb nom olganini tekshiring
qo'shib qo'ydi muallif stackoverfloweth, manba
Sizning kodingizdagi harflaringiz bor, men ishlaganman.
qo'shib qo'ydi muallif ibubi, manba
Sizning kodingizdagi harflaringiz bor, men ishlaganman.
qo'shib qo'ydi muallif ibubi, manba

6 javoblar

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 $(document).ready(function() {

        runAnimation();
    });

    function runAnimation() {
        $('#main-div').fadeIn(1500, function() {
            $('#first-div').fadeIn(1500, function() {

                $('#second-div').fadeIn(3000, function() {
                    $('#third-div').fadeIn(6000, function() {

                    });
                    $('#fourth-div').fadeIn(12000, function() {

                    });
                });
            });
        });
    }
  .box {
            background-color: red;
            width: 100px;
            height: 100px;
            display: none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <div id="main-div" class="box"></div>
<div id="first-div" class="box">
    
Text inside div

</div> <div id="second-div" class="box">
Text inside div

</div> <div id="third-div" class="box">
Text inside div

</div> <div id="fourth-div" class="box">
Text inside div

</div>
</div> </div>
1
qo'shib qo'ydi
bu matnli va rasmli div bilan ishlayotganligiga ishonchim komil emas
qo'shib qo'ydi muallif Beep, manba
Bu ishni qilganda javob berishni mukammal, yomon qabul qiladi, rahmat
qo'shib qo'ydi muallif Beep, manba
Siz uni har qanday holda yangilab olishingiz mumkin.
qo'shib qo'ydi muallif ibubi, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 $(document).ready(function() {

        runAnimation();
    });

    function runAnimation() {
        $('#main-div').fadeIn(1500, function() {
            $('#first-div').fadeIn(1500, function() {

                $('#second-div').fadeIn(3000, function() {
                    $('#third-div').fadeIn(6000, function() {

                    });
                    $('#fourth-div').fadeIn(12000, function() {

                    });
                });
            });
        });
    }
  .box {
            background-color: red;
            width: 100px;
            height: 100px;
            display: none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <div id="main-div" class="box"></div>
<div id="first-div" class="box">
    
Text inside div

</div> <div id="second-div" class="box">
Text inside div

</div> <div id="third-div" class="box">
Text inside div

</div> <div id="fourth-div" class="box">
Text inside div

</div>
</div> </div>
1
qo'shib qo'ydi
bu matnli va rasmli div bilan ishlayotganligiga ishonchim komil emas
qo'shib qo'ydi muallif Beep, manba
Bu ishni qilganda javob berishni mukammal, yomon qabul qiladi, rahmat
qo'shib qo'ydi muallif Beep, manba
Siz uni har qanday holda yangilab olishingiz mumkin.
qo'shib qo'ydi muallif ibubi, manba

or with plain javascript

setTimeout(function() {
  setTimeout(function() {
    setTimeout(function() {
      setTimeout(function() {
         //whatever you need to do
      }, 1500);
    }, 3000);
  }, 6000);
}, 12000);
1
qo'shib qo'ydi
Bu savolga javob bermaydi (qanday tartibda divllarni yo'q qilish).
qo'shib qo'ydi muallif Mike McCaughan, manba
Yaxshi @MikeMcCaughan, agar siz hozirda tuzilgan tahrir bilan savolni qaytadan o'qib chiqsangiz, uning asosiy maqsadi fade in ga emas, balki yuklamani divllarni keyin . Agar shart bo'lsa, ha, javobingiz to'g'ri bo'ladi, shuning uchun takrorlash orqali yuklash oralig'ini qayta yaratishning yana bir yo'li yozdim.
qo'shib qo'ydi muallif Erhan Yaşar, manba

or with plain javascript

setTimeout(function() {
  setTimeout(function() {
    setTimeout(function() {
      setTimeout(function() {
         //whatever you need to do
      }, 1500);
    }, 3000);
  }, 6000);
}, 12000);
1
qo'shib qo'ydi
Bu savolga javob bermaydi (qanday tartibda divllarni yo'q qilish).
qo'shib qo'ydi muallif Mike McCaughan, manba
Yaxshi @MikeMcCaughan, agar siz hozirda tuzilgan tahrir bilan savolni qaytadan o'qib chiqsangiz, uning asosiy maqsadi fade in ga emas, balki yuklamani divllarni keyin . Agar shart bo'lsa, ha, javobingiz to'g'ri bo'ladi, shuning uchun takrorlash orqali yuklash oralig'ini qayta yaratishning yana bir yo'li yozdim.
qo'shib qo'ydi muallif Erhan Yaşar, manba

Bu CSS yordamida bajarilishi mumkin

Turli xil kechikishlar bilan har bir div qo'shing

animation-name: fadeinLoad; 
animation-duration: 1s; 
animation-delay: 5s; 
animation-fill-mode: forwards;

@-webkit-keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Ishlaydigan misol

https://jsfiddle.net/dolphine/8xx1v8q3/

1
qo'shib qo'ydi
Men buni yaxshi ko'raman, lekin qanday qilib har bir tasvir uchun buni amalga oshiraman?
qo'shib qo'ydi muallif Beep, manba

Bu CSS yordamida bajarilishi mumkin

Turli xil kechikishlar bilan har bir div qo'shing

animation-name: fadeinLoad; 
animation-duration: 1s; 
animation-delay: 5s; 
animation-fill-mode: forwards;

@-webkit-keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Ishlaydigan misol

https://jsfiddle.net/dolphine/8xx1v8q3/

1
qo'shib qo'ydi
Men buni yaxshi ko'raman, lekin qanday qilib har bir tasvir uchun buni amalga oshiraman?
qo'shib qo'ydi muallif Beep, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb