Difference between revisions of "Template:XJTU-China/home.js"

(fix the animation queue bug)
Line 21: Line 21:
 
       var next_iter = iter+1;
 
       var next_iter = iter+1;
 
     }
 
     }
     $('#banner-pic-'+next_iter).fadeIn(1000);
+
     $('#banner-pic-'+next_iter).clearQueue().fadeIn(1000);
     $('#banner-pic-'+iter).delay(500).fadeOut(1000);
+
     $('#banner-pic-'+iter).clearQueue().delay(500).fadeOut(1000);
 
     iter = next_iter;
 
     iter = next_iter;
 
   }, 6000)
 
   }, 6000)

Revision as of 22:16, 15 October 2018

$(document).ready(function(){

 // banner text showing animation
 $('#text-d').animate({opacity: '1'}, 800, 'swing');
 $('#text-e').delay(800).animate({opacity: '1'}, 800, 'swing');
 $('#text-cose').delay(1600).animate({opacity: '1'}, 1000, 'swing');
 $('.banner-sub-text').delay(3000).animate({opacity: '1'}, 800, 'swing');
 $('.banner-up-arrow').delay(4000).animate({opacity: '1'}, 800, 'swing');
 // banner scroll hint animation
 setInterval(function(){
   $('.banner-up-arrow').clearQueue().fadeTo(1400, 0.4).fadeTo(1400, 0.8);
 }, 2800);
 var iter=1;
 // banner picture cycling animation
 setInterval(function(){
   if (iter == $('.banner-pic-wrapper').children().length-1) {
     var next_iter = 1;
   } else {
     var next_iter = iter+1;
   }
   $('#banner-pic-'+next_iter).clearQueue().fadeIn(1000);
   $('#banner-pic-'+iter).clearQueue().delay(500).fadeOut(1000);
   iter = next_iter;
 }, 6000)
 // content text showing animation
 $('.content-title').waypoint(function(){
   $(this.element).animate({top: '0', opacity: '1'}, 800, 'swing');
 }, {offset: '70%'});
 $('.content-text:not(#content-block-2 .content-text)').waypoint(function(){
   $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
 }, {offset: '70%'});
 $('#content-block-2 .content-text').waypoint(function(){
   $(this.element).animate({left: '0', opacity: '1'}, 600, 'swing');
 }, {offset: '70%'});
 // team picture
 $("#content-block-4").waypoint(function() {
   if ($("#content-block-4").data('inview') != 'true') {
     $('.banner-pic-wrapper').hide();
     $('#content-block-4-pic').show();
     $("#content-block-4").data('inview', 'true');
   } else {
     $('.banner-pic-wrapper').show();
     $('#content-block-4-pic').hide();
     $("#content-block-4").data('inview', 'false');
   }
 }, {offset: 'bottom-in-view'});

});