jquery - 图像在页面滚动时淡入

Question

我正在尝试做一件简单的事情。当我滚动页面时，固定在顶部的图像应该出现并在顶部滚动时消失。我以这种方式在 img 选择器中设置了隐藏的可见性，当页面加载时它将被隐藏。不幸的是，下面的代码不起作用

这是 jsfiddle http://jsfiddle.net/vhe3rhLd/和 jquery 函数:

已更新

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(1000, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(1000, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

Answer 1

您使用的函数 fadeTo() 有误。

fadeTo()的参数是:

fadeTo(duration,opacity,callback)

所以正确的使用方法如下:

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(500, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(500, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

此外，在回调中使用不透明度 (fadeTo) 和可见性可能会给您带来意想不到的行为，因为您在 fadeIn 或 fadeOut 完全执行后设置了可见性。也许你可以避免使用可见性而只使用不透明度，如下所示:

    $(window).bind('scroll', function(event) {
      if ($(this).scrollTop() > 100) {
        $('img').fadeTo(500, 1);
      } else {
        $('img').fadeTo(500, 0);
      }
      event.preventDefault();
      });
$('img').hide();//Hide the image at start

我做 jsFiddle显示它。检查它是否符合您的需求。