将 Div 滑出屏幕而不是淡入淡出答案

【问题标题】：Slide Div off screen instead of fade将 Div 滑出屏幕而不是淡入淡出
【发布时间】：2013-12-03 19:01:03
【问题描述】：

我一直试图让它工作，但我找不到解决方案。

目前我有 Divs 从屏幕顶部滑动，然后淡出。我希望 Div 从屏幕上滑下，而不是淡出。

var elements = ['#pointsbarDiv', '#hotlink1Div','#pointsbarDiv', '#hotlink2Div'];

function anim_loop(index) {
    $(elements[index]).slideDown(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % elements.length);
        }, 5000);
    });
}

anim_loop(0); // start with the first element**strong text**

提前感谢您的帮助。

【问题讨论】：

好吧，如果你所做的只是淡出它，它就不会从屏幕上滑下来。“我有这个绿色的 div，我怎么让它变黄？”我>
我想将动画从淡入淡出更改为幻灯片。正如 Jwags 在下面为我回答的那样。但是，现在我的问题是我希望他的动画也能替换我代码中的 slideDown。
我的观点通常是关于stackoverflow，您必须尝试自己解决问题。然后，我们将帮助您解决您在此过程中遇到的任何问题。我们不是来为你做的，简单地说“使用 .animate”的回答不是很有用。
我一直在尝试自己...我什至自己尝试过 animate() 等，但不像 jwags 那样。
下次您应该在问题中包含这些内容，以表明您已经完成了自己的研究。

标签： javascript jquery html css

【解决方案1】：

您只需要将 fadeOut 调用替换为对 .animate() 的调用。这是一个将位置顶部值设置为低于屏幕高度的示例

function anim_loop(index) {
  $(elements[index]).css({top: 0, display: 'none'}).slideDown(1000, function() {
    var $self = $(this);
    setTimeout(function() {
      $self.animate({top: $(window).height() + 100}, 1000);
      anim_loop((index + 1) % elements.length);
    }, 2000);
  });
}

anim_loop(0); // start with the first element

demo

【讨论】：

谢谢，这正是我想要的。只是想知道...我如何实现动画来替换 slideDown？
我建议阅读答案中提供的 jQuery animate 文档的链接。这是了解移动 DOM 的不同选项的好资源。