Question

我遇到了一个关于jquery中效果队列的小问题。我想要实现的是将元素淡入与动画相同的起点 - 简单。问题是我希望在动画结束时让它变为fadeOut，因为看到操纵队列似乎不起作用。

DEMO
在动画开始的同时查看持续时间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，效果队列

1 个答案: