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

Question

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

• 我可以让淡出工作，但无法让替换 (.html) 功能和淡入方法工作
• 我注意到当用户从顶部滚动超过 250 像素时，淡出不会立即发生；它滞后了很多，尤其是在页面滚动速度更快的情况下。

我已经尝试了 .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

您在淡入/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

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