幻灯片图像和加载文本

Question

相当难以解释，但我正在尝试创建一个智能幻灯片，只需一张幻灯片。不需要其他幻灯片。

基本上我们有一个div宽600px宽150px高。边框1px固定任何颜色。

在页面加载时，会出现空白幻灯片，图像从右向左滑动，同时文本幻灯片在div的右手部分从下到上滑动。

图像和文本停靠在最终位置，动画结束。所以在我的图纸中如图4所示。

我没有代码，因为我真的不知道从哪里开始这样做，只是想知道是否有人知道某些脚本要做到这一点并且可能指出我正确的方向而不会对我生气。

我不希望任何人为我编码，也许只是给我指示，因为我很乐意摆脱它并稍后回来并提出更多问题。

请参阅下面的图片。

干杯

Answer 1

DEMO

使用：.animate()和.delay()来延迟文本框的出现：

$(function() {

    $('.imgbox').animate({left:'18'}, 1200);
    $('.textbox').delay(500).animate({top:'18'}, 700);

});

Answer 2

非常抱歉，但我无法抗拒编码......

Demo

主要关键点是：

1. 使用溢出隐藏
2. 使用具有绝对定位子容器的相对定位的容器
3. 左侧动画：水平和顶部为0％：垂直为
为0％
4. 以相同的时间值一个接一个地运行他们的动画，以确保他们同时到达目的地。

你有它。