jquery - 无法在 Logo 图像之间交叉淡入淡出

Question

当我滚动 Logo 图像捕捉到我希望它们交叉淡入淡出的位置时。这是我的 fiddle 。

$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.wsmenu-list').css('margin', '5px auto');
            $('.megamenu').css('top', '60px');
            $('.smllogo img')
                
                .attr('src', 'http://beta.herringboneandsui.com/images/text-logo.svg');
                 $('.smllogo img').fadeIn('slow');
			
        }
        if ($(this).scrollTop() < 100) {
            $('.wsmenu-list').css('margin', '14px auto');
            $('.megamenu').css('top', '70px');
           
			
            $('.smllogo img')
               
                .attr('src', 'http://beta.herringboneandsui.com/images/logo.svg');
        }
    });
});

body{min-height:2000px}
.smllogo{position:fixed; width:300px; height:60px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smllogo"><a href="#" >
          <img src="http://beta.herringboneandsui.com/images/logo.svg" alt=""/> </a></div>

Answer 1

您需要淡出前一个，然后淡入新的。您还需要一个标志来确定是否需要淡出(isTextLogo 是标志)。

由于您使用的是一个元素并切换其来源，因此一旦来源已更新，您就需要淡入元素，而我们只能在元素完全淡出后更新来源，因此来源的更新和淡入淡出需要在淡出之后。可以看到，淡入和更新源码我都放在了淡出的完整函数里面

$(function() {
  var isTextLogo = false;
  $(window).scroll(function() {

    if ($(window).scrollTop() >= 100) {

      if (!isTextLogo) {
        $('.wsmenu-list').css('margin', '5px auto');
        $('.megamenu').css('top', '60px');
        $('.smllogo img').fadeOut('slow', function() {
          $(this).attr('src', 'http://beta.herringboneandsui.com/images/text-logo.svg').fadeIn('slow');

        });

        isTextLogo = true;

      }

    } else {

      if (isTextLogo) {
        $('.wsmenu-list').css('margin', '14px auto');
        $('.megamenu').css('top', '70px');


        $('.smllogo img').fadeOut('slow', function() {
          $(this).attr('src', 'http://beta.herringboneandsui.com/images/logo.svg').fadeIn('slow');
        });
        isTextLogo = false;

      }

    }
  });
});

body {
  min-height: 2000px
}

.smllogo {
  position: fixed;
  width: 300px;
  height: 60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smllogo"><a href="#">
          <img src="http://beta.herringboneandsui.com/images/logo.svg" alt=""/> </a></div>