Question

我正在尝试获得this效果（你需要向下滚动一下才能看到div滑入）

我对JS不太好但是我设法使用这段代码使div从0不透明度变为完全不透明度：

  tiles = $(".recipe").fadeTo(0, 0);
  $(window).scroll(function(d,h) {
      tiles.each(function(i) {
          a = $(this).offset().top + $(this).height();
          b = $(window).scrollTop() + $(window).height();
          if (a < b) $(this).fadeTo(500,1);
      });
  });

任何人都可以帮助我获得理想的效果吗？滚动时，我需要div从0不透明度上滑到100％不透明，从下到上。

希望这是有道理的，谢谢。

Answer 1

我认为这是一个可能的解决方案：

var scrollCb = function () {
    var tiles = $(".tile:not(.animated)");
    var $window = $(window);
    var b = $window.scrollTop() + $window.height();

    tiles.each(function (i) {
        var $this = $(this);
        var a = $this.offset().top + $this.height();

        if (a < b) {
            $this.addClass("animated").addClass("fadeInUp");
        }
    });
};

$(scrollCb);

$(window).scroll(scrollCb);

http://jsfiddle.net/74u765q2/4/

animate.css实现动画部分。

Answer 2

该页面使用名为waypoints的jquery库。你必须下载航点库，这个库有很多滚动事件的功能：

例如：

$('#example-offset-percent').waypoint(function() {
    notify('25% from the top');
}, { offset: '25%' });

当对象距离屏幕顶部25％时，此代码会触发通知。

这是该页面的链接：

http://imakewebthings.com/jquery-waypoints/

在滚动时从底部滑动div

2 个答案: