Question

我有多个背景图像，每个背景图像都位于一个文本块的后面。我想淡化每张背景图片，并在一个背景图片淡入另一张背景图片时使文本向上移动。

例如

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上没有人给您一个完美的答案。我们能做的最好的事情就是创建一个小样例，演示如何可以完成这种影响。然后，您可以从示例中学习并将概念应用到自己的代码中。

如果我要尝试实现这一目标，则可以采用以下方法：

使用position: absolute;将图像堆叠在一起
- 第一个图像组应具有最高的z索引，因此它位于顶部。 CSS可以做到这一点！
- 第二个图像组应具有第二高的z索引，以便在淡入淡出时显示在第一张图像的后面。再次使用CSS！
- 所有其他image_groups的z-index都应位于第二个图像下方。可以使用CSS！
分别对图像和文本进行动画处理
- 图像只需淡出
- 文本需要淡出和淡出
第一个（顶部）图像组完全消失后，将其移至列表底部
删除jQuery的style="..."应用于图像组的内联.animate()。完成此操作后，图像组将遵循我们在第一步中设置的css规则。

JS Fiddle Demo

第一步是在编写HTML和CSS时由您手动完成，但是jQuery可以处理第2-4步。然后，只要您想重复就可以了。询问是否需要，但尝试将其应用于您自己的代码。祝你好运！

淡化背景将文本向上移动

1 个答案: