jquery анимировать два класса одновременно

У меня проблема с функцией animate(). Я хочу сначала анимировать 2 объекта, затем подождать 4 секунды и снова анимировать этот объект. Мой код такой:

//Animation In
$('.show').animate({marginTop : '1px' , opacity: '1px'},1000).delay(4000);
$('.caption').animate({opacity : '1px', top : '20px'},1000).delay(4000);       

//After 4 Second Animation Out       
$('.show').animate({ marginTop : '-200px', opacity:'0px'},1000);
$('.caption').animate({opacity : '0px' , top : '70px'},500,function()
   {         
                fadeInwhipe();// calls This Function
   });

Это отлично работает для класса .show, но иногда .caption анимируется очень быстро перед .show. Я попытался установить .caption в функцию обратного вызова .show, чтобы предотвратить раннюю анимацию .caption, например:

//Animation In
$('.show').animate({marginTop : '1px' , opacity: '1px'},1000).delay(4000);
$('.caption').animate({opacity : '1px', top : '20px'},1000).delay(4000);       

//After 4 Second Animation Out       
$('.show').animate({ marginTop : '-200px', opacity:'0px'},1000 ,function(){
    $('.caption').animate({opacity : '0px' , top : '70px'},500,function()
      {         
                fadeInwhipe();// calls This Function
      });
);

Но в этом случае он анимируется после завершения .show. Он выполняется, но я хочу анимировать оба класса одновременно. Есть ли решение? Спасибо ...


animation jquery delay jquery-animate jquery-callback
person Amit Trivedi    schedule 13.01.2012    source источник
comment
Можете ли вы включить свой html и css или рабочий пример? У меня работает нормально jsfiddle.net/6fms5   -  person James Montagne    schedule 13.01.2012

Ответы (1)


arrow_upward
0
arrow_downward

Использовать очередь: false

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });
    $("#first").animate({
       marginTop: '50px'
    }, { duration: 200, queue: false });
});
person Kyle Macey    schedule 13.01.2012
comment
Это для одновременного запуска двух анимаций одного и того же элемента. Он просто пытается запустить анимацию для двух разных элементов одновременно. - person James Montagne; 13.01.2012