淡出，效果队列

Question

我遇到了一个关于 jquery 中效果队列的小问题。 我试图实现的是让元素淡入与动画相同的起点 - 很容易。问题是当我想让它在动画结束时淡出，因为操作队列似乎不起作用。

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');
}

您实际上无法在单个元素上设置并行动画队列。一切要么立即执行，要么按顺序执行，包括延迟。但是没有理由不能同时为元素和其父元素设置动画。