FadeOut，效果队列

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

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

FadeOut，效果队列

FadeOut, effect queue

queue

jquery

effect

fadeout

fadein