javascript - 淡化背景 向上移动文本

Question

我有多个背景图像，每个背景图像都在一个文本 block 后面。我想淡化每个背景图像，并在一个背景图像淡入另一个背景图像时让文本向上移动。

例如

BG1(背景图片 1)上面有 Tegxt1。随着 BG1 淡入 BG2，Text1 向上移动并被 Text2 取代。

我如何使用简单的 jquery、javascript 和 CSS 来做到这一点？

这是我尝试过的

this._currentTimeout = setTimeout(function() {
    this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
        this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
        this.slides$.eq(newSlideIndex).css('z-index', 2);
        this.currentSlideIndex = newSlideIndex;

        this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
    }.bind(this));
}.bind(this), durationUntilTransition);

Answer 1

你没有提供足够的代码来生成一个完整的工作示例(你的 html 是如何结构的？你的 jQuery 在页面上的什么位置？你现有的 CSS 是什么样的？)，所以不幸的是 StackOverflow 上没有人给你一个完美的答案。我们能做的最好的事情就是创建一个小演示，说明您可以做些什么来实现这种影响。然后由您从示例中学习并将概念应用到您自己的代码中。

如果我要尝试实现这一点，我会采用以下方法:

1. 使用 position: absolute; 将图像堆叠在一起
   • 第一个图像组应具有最高的 z-index，因此位于顶部。 CSS 可以做到这一点!
   • 第二个图像组应具有第二高的 z-index，以便在淡入淡出过程中显示在第一个图像后面。又是 CSS!
   • 所有其他 image_groups 应该在第二张图片下方有 z-index。 CSS 赞!
2. 分别为图像和文本制作动画
   • 图像只需要淡出
   • 文本需要淡出和淡出
3. 第一个(顶部)图像组完全淡化后，将其移至列表底部
4. 删除 jQuery 的 .animate() 应用于图像组的内联 style="..."。执行此操作后，图像组将遵守我们在第一步中设置的 css 规则。

JS Fiddle Demo

当您编写 HTML 和 CSS 时，第一步将由您手动完成，但是您的 jQuery 可以处理第 2-4 步。然后重复你想要的次数。如果需要，请提出问题，但要努力将其应用到您自己的代码中。祝你好运!!