pelonggaran jquery mencapai animasi_jquery pemuatan seperti kilat

Tahun lepas, saya menemu bual sebuah syarikat yang membuat laman web Selepas melihat kes mereka, saya terjumpa satu yang sangat menarik iaitu laman web rasmi hartanah, yang dibuat menggunakan flash. Sedap rasanya.

Jadi, pada masa lapang, saya membuat tiruan jquery yang mudah. Di bawah ialah rendering saya Skrip tidak dioptimumkan, dan kelancaran tidak selancar kilat. Tetapi yang penting ialah apabila saya melihat kilat ini, saya terfikir

Idea bagaimana untuk mencapai kesannya sangat sesuai untuk orang baru.

Perhatikan rayuan, pertama sekali terdapat animasi pemuatan di sebelah kiri,

Salin kod Kod adalah seperti berikut:

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
});

Kemudian panggil fungsi panggil balik di sebelah kanan

Salin kod Kod adalah seperti berikut:

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' memperkenalkan perpustakaan easing.js
rightImg();
});
function rightImg(){
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){// myNext memanggil dirinya semula (secara rekursif)
               $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext); 
if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("atas",0) ){
//if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
// alert('Latihan terakhir selesai');
                               $('.title').animate({ left:0},"slow", function(){//Sky animation
                       $(".kanan").cari('li').legar(fungsi(){ // Kesan leding kanan
                  $(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
           }, function(){
             $(this).find('.liSlideDown').stop(true,false).slideUp().hide();
           });//Tamat panggilan balik
        });
                                                                                   });
};

Akhir sekali, klik pada setiap satu di sebelah kanan, padankan tukar bahagian atas bahagian Sky sayang di sebelah kiri, perhatikan warna di sini, dan gunakan pelaksanaan indeks indeks.

Kod sumber dilampirkan di bawah: Jangan lupa perpustakaan kelas jquery dan perpustakaan kelas melonggarkan

Salin kod Kod adalah seperti berikut:

     
      

       

       

Dear Sky

This is the new word


       
• 

       
• 

       
• 

       
• 

       
• 

      

     

     
      $(dokumen).sedia(fungsi(e) {
         //载入动画
        $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
            rightImg();
            });
            function rightImg(){
                              $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){
                  $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext); 
                      if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("atas",0) ){
                       //if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
                       //alert('最后一个运动好了');
                          $('.title').animate({ left:0},"slow",function(){//Sky 动画
                                    $(".right").find('li').hover(function(){  // 右侧 hover效果
                                    $(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
                                    },fungsi(){
                                    $(this).find('.liSlideDown').stop(true,false).slideUp().hide();
                                    });//回调结束
                                    });
                }                  
                   });
             }
        //tab 切换效果
                 var liNum=$('.right').find('li').length;
             $('.right').on("klik","li",function(){
         var index=$('.right').find("li").index(this);
         //alert(index);
         $('.left').find('li').eq(index).fadeIn(1250).adik-beradik().fadeOut(800).end().tambah('.title').fadeIn(1500) ;
         //$('.title').addClass("liBk" index).removeClass("liBk" (index=index-1));
          // var myClassName="title 'liBk' index";
          var myClassName='liBk' indeks;
          var titles='title' ' ';
         // console.log('myClassName是' myClassName);
         Funktion setTitleClass(myClassName){
             $('.title').each(function(index) {
                this.className=(titles myClassName);
            });
           }
         setTitleClass(myClassName);
        // console.log("liBk" index);
         });
      });
     
     

       

       
• 
  11

       
• 
  22

       
• 
  33

       
• 
  44

       
• < ;div class="liContent">最后一个

      
     

    
    
     

     

        

          
• 菜单

          
• 首页

          
• Sky

          
• 其他

          
• 测试

          
• 我们

        

     

     

以上就是使用jquery类库简单实现仿FLASH载入动画的实例了，希望大家能够喜欢