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

Question

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

我能够使淡出效果正常工作，但根本无法使替换 (.html) 函数和 fadeIn 方法正常工作
我注意到淡出不会在用户从顶部滚动超过 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

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

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

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

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

jQuery fade out element, replace content and fade back in

javascript

jquery

jquery-animate

fadein