Question

我有一个网站，我正在尝试使用滚动事件 1）淡出公司名称的文本版本， 2）用公司徽标的图像文件替换该元素的内容 3）将徽标淡入。我面临的问题：

我能够让淡出工作，但无法获得替换（.html）函数和fadeIn方法才能工作
我注意到当用户从顶部滚动超过250px时，淡出不会立即发生;它相当滞后，尤其是页面滚动速度更快。

我已经尝试了.animate和.fadeIn / .fadeOut版本的淡入淡出，但仍然没有运气回复功能正确替换元素内容并将其淡化回视图。

我的代码如下：

jQuery(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var data = '<img src="assets/template/images/afl_logo_sm.png" width="135" height="55" alt="AFL">'
console.log('Scroll ', scrollTop);
if (scrollTop >= 250) {
  jQuery('a.navbar-brand').stop().animate({
    opacity: 0.0
  }, 500, function() {
    jQuery('a navbar-brand').html(data).fadeIn('fast');
  });
}
});

感谢您提供的任何帮助，

桑德曼

Answer 1

您在fadein / html代码中缺少类选择器，您正在使用类作为后代选择器

jQuery(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var data = '<img src="//placehold.it/135X55" width="135" height="55" alt="AFL">'
    if (scrollTop >= 250) {
        jQuery('a.navbar-brand').stop().animate({
            opacity: 0.0
        }, 500, function () {
            jQuery(this).html(data).animate({
                opacity: 1
            });
        });
    }
});

演示：Fiddle

此外，一旦动画完成，我认为进一步滚动不应该重复它，所以

var flag = false;
jQuery(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var data = '<img src="//placehold.it/135X55" width="135" height="55" alt="AFL">'
    if (scrollTop >= 250) {
        if (!flag) {
            flag = true;
            jQuery('a.navbar-brand').stop().animate({
                opacity: 0.0
            }, 500, function () {
                jQuery(this).html(data).animate({
                    opacity: 1
                });
            });
        }
    }
});

演示：Fiddle

至于滞后，浏览器是一个单线程应用程序，因此当滚动速度更快时，浏览器可能会花费更多时间按照滚动更新视图，而不是处理fadeIn的脚本执行

jQuery淡出元素，替换内容并淡入

1 个答案: