25. Анімація

Анімація числових css властивостей

.animate({'css властивість':'нове значення'},швидкість,queue, функція) - зміна властивостей css, що задаються числовими значеннями (queue за умовчанням true - всі анімації виконуються по черзі, якщо false - то одночасне виконання анімацій)

.stop(clearQueue, jumpToEnd ) - зупиняє анімації
.finish() - аналог .stop(true,true), миттєво завершує поточну анімацію і очищує чергу наступних анімацій

Приклади

.animate({'css властивість':'нове значення'},швидкість,queue, функція)

Зміна властивостей css, що задаються числовими значеннями.

Скорочені CSS властивості (такі, як font, background, border) підтримуються з обмеженнями. Наприклад: для анімації ширини бордеру потрібно щоб початкова ширина була вказана заздалегідь. Повна документація на офіційному сайті

#a1

$("#btn1").click(function() {
	
         $('#a1 div').animate({'width':'300'},2000);
         $('#a1 div').animate({'margin-left':'170'},1000);
       
});

queue

За умовчанням встановлено true

#sq

 $("#b1").click(function() {
    $('#sq div').animate({'width':'250'},2000);
/* true - звичайний порядок (можна не писати) */   
    $('#sq div').animate({'width':'50'},{duration: 2000,queue:true});
         
});

 $("#b2").click(function() {
    $('#sq div').animate({'width':'250'},3000);
 /* false - одночасне виконання */ 
    $('#sq div').animate({'margin-left':'270'},{duration: 3000,queue: false});
});

.stop(queue, clearQueue, jumpToEnd )

Зупинка анімації

#sa

/* -> */
$("#btn2").click(function() {
         $('#sa div').animate({'width':'350'},3000);
});
/* <- */
$("#btn3").click(function() {
	     $('#sa div').animate({'width':'10'},3000);
});
/* stop */
$("#btnstop").click(function() {
	     $('#sa div').stop();
});

За умовчанням встановлено false

#sft

- зупинить поточну анімацію і почне виконувати наcтупну

- запинить чергу анімацій і при повторному пуску почне всю чергу спочатку з того місця де зупинилась поточна

- миттєво закінчить поточну анімацію і почне виконувати наcтупну

- миттєво перейде в кінець поточної анімації і очистить чергу анімацій (аналог .finish())

  $("#btnanime4").click(function() {
  	/* перша анімація */
         $('#sft div').animate({'width':'250'},3000);
     /* друга анімація */    
         $('#sft div').animate({'margin-left':'270'},3000, function(){
         	$(this).css('border','3px solid blue');
         });
    /* третя анімація */     
         $('#sft div').animate({'margin-left':'20'},3000,function(){
         	$(this).css('border','3px solid white');
         });
      /* четверта анімація */   
         $('#sft div').animate({'width':'50'},1000);
});
/* stop() */
$("#btns1").click(function() {
	     $('#sft div').stop();
});
 
/* stop(true) */
$("#btns2").click(function() {
	     $('#sft div').stop(true);
});
 
/* stop(false,true) */
$("#btns3").click(function() {
	     $('#sft div').stop(false,true);
});

далі ✏