2012-01-13 5 views
0

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

//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 закончил. Он выполняется, но я хочу оживить оба класса сразу. Есть ли решение? Спасибо ...

+0

Вы можете включить свой HTML и CSS, или рабочий пример? Кажется, для меня хорошо работает http://jsfiddle.net/6fms5/ –

ответ

0

Использование Queue: ложные

$(function() { 
    $("#first").animate({ 
     width: '200px' 
    }, { duration: 200, queue: false }); 
    $("#first").animate({ 
     marginTop: '50px' 
    }, { duration: 200, queue: false }); 
}); 
+0

Это одновременное выполнение двух анимаций одного и того же элемента. Он просто пытается запустить анимацию на двух разных элементах одновременно. –

Смежные вопросы