滑动Div屏幕而不是淡入淡出

Question

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

目前我有Div从屏幕顶部滑动，然后淡出。 我想让Div从屏幕上滑下来，而不是淡出。

当前示例位于此处 http://jsbin.com/uwonun/45/

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**

提前感谢您的帮助。

Answer 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