jquery easing achieves flash-like loading animation_jquery

Last year, I interviewed a company that makes websites. After looking at their cases, I came across a very interesting one, a real estate official website, which was made using flash. It feels good.

So, in my spare time, I made a simple jquery imitation. Below is my rendering. The script is not optimized, and the smoothness is not as smooth as flash. But the important thing is that when I saw this flash, I thought

The idea of ​​how to achieve its effect is very suitable for novices.

Observe the appeal, first of all there is a loading animation on the left,

Copy code The code is as follows:

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

Then call the callback function on the right

Copy code The code is as follows:

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' introduces the easing.js library
rightImg();
});
function rightImg(){
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){// myNext calls itself back (recursively)
               $(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("top",0) ){
//if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
​​​​ //alert('The last exercise is done');
                               $('.title').animate({ left:0},"slow",function(){//Sky animation
                       $(".right").find('li').hover(function(){ // Right hover effect
                  $(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
           },function(){
             $(this).find('.liSlideDown').stop(true,false).slideUp().hide();
           });//End of callback
        });
                                                                                 });
};

Finally, click on each one on the right side, correspondingly switch the upper part of the dear Sky part on the left, observe the color here, and use the implementation of index index.

The source code is attached below: Don’t forget the jquery class library and easing class library

Copy code The code is as follows:

     
      

       

       

Dear Sky

This is the new word


       
• 

       
• 

       
• 

       
• 

       
• 

      

     

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

       

       
• 
  11

       
• 
  22

       
• 
  33

       
• 
  44

       
• 
  最后一个

      

     

    
    
     

     

        

          
• 菜单

          
• 首页

          
• Sky

          
• 其他

          
• 测试

          
• 我们

        

     

     

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