jquery - css3 宽度过渡不适用于图像

Question

向下滚动时，我使用 jQuery 在我的标题中添加了一个类以设置不同的样式。每种风格我都有两种不同颜色的两个标志。原始的比滚动时加载的大。我给了他们一个 diff 宽度并针对该类，但过渡有效的唯一一个是原始的或#logo1。

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $('#main-page').addClass('appear');
    $('#logo1').fadeOut(0);
    $('#logo2').show(0);
  } else  {
    $('#logo2').hide(0);
    $('#logo1').fadeIn(0);
    $('#main-page').removeClass('appear');
  }
});

#main-page{
  background:transparent;
  position:absolute;
  width:100%;
  top:0;
  transition: background 600ms ease-in-out;
}
	
#main-page .site-nav{
  right:2em;
}
	
#main-page .site-nav a{
  color:white;
}
	
#main-page a.login-nav{
  background:#2ad4dc;
  padding: 1em !important;
  font-size:0.8em;
  color:black;
}
	
#main-page a.login-nav:hover{
  background:#FFF !important;
  color:black !important;
}

#main-page a.vert:before,a.vert:after{
  background:#fff;
}

#main-page .liner:before,.liner:after{
  background:#fff;
}
	
#main-page .got{
  width:220px;
  transition:width 600ms ease-in;
}

.appear .got{
  width:200px !important;
  transition:width 600ms ease-in;
}

.appear{
  position:fixed !important;
  background:white !important;
  top:0;
  width:100%;
  z-index:6;
  box-shadow: 2px 1px 10px #333;
}

#logo2 {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-page">
  <div class="container">
    <div class="logo-container">
      <a id="logo1" href="/">
        <img class="got" src="img/img1.png" alt="test" />
      </a>
      <a id="logo2" href="/">
        <img class="got" src="img/img2.png" alt="test" />
      </a>
    </div>

    <nav class="site-nav">
      <ul class="navi">
        <li>
          <span class="liner">
            <a class="vert" href="/">Home</a>
          </span>
        </li>
        <li>
          <span class="liner">
            <a class="vert" href="https://medium.com/">Blog</a>
          </span>
        </li>
        <li class="log">
          <a class="login-nav" href="/meta">
            <i class="fa fa-sign-in" aria-hidden="true"></i>Try Now
          </a>
        </li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</header>

Answer 1

问题似乎是您使用隐藏/显示方法(设置显示属性)和 #logo2{ display:none } 隐藏/显示 #logo2/.

另一种方法可能是只有一个 img 元素并使用新图像的 URL 更改 src 属性。用第二张图片的 URL 放置一个隐藏的 img 元素可能是个好主意，所以它会在您显示之前预取。

查看下面的代码片段以获得完整的解决方案。

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $("#logo img").attr("src", "http://via.placeholder.com/350x150");
    $("#logo").addClass("appear");
  } else {
    $("#logo img").attr("src", "http://via.placeholder.com/250x150");
    $("#logo").removeClass("appear");
  }

});

body {
  height: 600px;
}

#main-page {
  margin-top: 100px;
  background: transparent;
  position: absolute;
  width: 100%;
  top: 0;
  transition: background 600ms ease-in-out;
}

#main-page .site-nav {
  right: 2em;
}

#main-page .site-nav a {
  color: white;
}

#main-page a.login-nav {
  background: #2ad4dc;
  padding: 1em !important;
  font-size: 0.8em;
  color: black;
}

#main-page a.login-nav:hover {
  background: #FFF !important;
  color: black !important;
}

#main-page a.vert:before,
a.vert:after {
  background: #fff;
}

#main-page .liner:before,
.liner:after {
  background: #fff;
}

#main-page .got {
  width: 220px;
  transition: width 600ms ease-in;
  background-color: blue;
}

.appear .got {
  width: 200px !important;
}

.appear {
  position: fixed !important;
  background: white !important;
  top: 0;
  width: 100%;
  z-index: 6;
  box-shadow: 2px 1px 10px #333;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header id="main-page">
  <div class="container">
    <div class="logo-container">
      <a id="logo" href="/"><img class="got" src="http://via.placeholder.com/250x150" alt="test"><img class="hidden" src="http://via.placeholder.com/350x150" alt="test"></a>
    </div>

    <nav class="site-nav">
      <ul class="navi">
        <li><span class="liner"><a class="vert" href="/">Home</a></span></li>
        <li><span class="liner"><a class="vert" href="https://medium.com/">Blog</a></span></li>
        <li class="log"><a class="login-nav" href="/meta"><i class="fa fa-sign-in" aria-hidden="true"></i>Try Now</a></li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>

  </div>
</header>