Различные длительности свойств CSS в jQuery animate ()

Question

Я использую jQuery для анимации элемента DOM на странице и сталкиваюсь с препятствием при использовании его нативного animate().

Я пытаюсь переместить элемент вправо и изменить его непрозрачность.

$element.animate({
    'left': '50%',
    'opacity': '1.0'
}, 1000);

Работает очень хорошо, но мне нужно анимировать положение в 1000 мс и непрозрачность в 300 мс.

Я узнал, что Я не могу написать это так:

$element.animate({
    'left': '50%'
}, 1000);


$element.animate({
    'opacity': '1.0'
}, 300);

Это приведет к анимации в очереди, потому что это тот же элемент, и jQuery, очевидно, должен ждать завершения первой анимации. Или я тут что-то не так делаю.

Я пытался использовать запись второго аргумента (на основе http://api.jquery.com/animate) и использовать queue: false, но это не сработало. Должен сказать, что я не понимаю этого полностью, поэтому любые исправления приветствуются.

Итак, мой вопрос заключается в следующем - как независимо изменить интервал продолжительности для этих свойств CSS?

Answer 1

Я думаю, вы были на правильном пути, пытаясь использовать queue. Вот пример того, как это должно работать, я надеюсь, что это поможет:

$('#element').animate({ left:'50%' }, { queue: false, duration: 1000 })
             .animate({ opacity : '1.0' }, { queue : false, duration: 300 });

Редактировать: Успешно протестировано :)

Answer 2

Не могли бы вы оживить оба за один звонок в течение 300 мс. до 3/10 смены позиции, а затем анимировать оставшуюся часть смены позиции еще на 700 мс?