FadeOut, очередь эффектов

Question

Я столкнулся с небольшой проблемой относительно очереди эффектов в jquery. То, что я пытаюсь достичь, состоит в том, чтобы элемент исчезал в качестве той же начальной точки, что и анимация - легко. Проблема в том, когда я хочу, чтобы она была fadeOut, когда анимация заканчивается, видя, что манипулирование очередью, похоже, не работает.

https://jsfiddle.net/dpm3x4vw/
Посмотрите, как окно выгорает на протяжении 500 в то же время, как анимация начинается. Я пытаюсь добиться реверса этого при окончании анимации

function animateC(targetElement) { 
var targ = targetElement.width(); 
$(targetElement).fadeIn({queue:false, duration: 500 }, 'linear'); 
$(targetElement).animate({ left: 0 - targ }, 10000, 'linear'); 
// I wanna fadeOut in same style as the fadeIn aswell! 
} 

Answer 1

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

HTML:

<div> 
    <div id="test"> 
    <p>test</p> 
    </div> 
</div> 

JavaScript:

function animateC(targetElement) { 
    var targ = targetElement.width(); 

    $(targetElement) 
    .fadeIn({ queue: false, duration: 500 }, 'linear') 
    .animate({ left: 500 - targ }, 10000, 'linear') 
    .parent() 
    .delay(9500) 
    .fadeOut({ duration: 500 }, 'linear'); 
} 

Вы не можете фактически создавать параллельные очереди анимации на один элемент. Все либо выполняется немедленно, либо последовательно, включая задержки. Но нет причин, по которым вы не можете одновременно анимировать элемент и его родитель.