css3画像の上での幅の変換がありません

Question

スクロールして別の方法でスタイルを変更するときに、jQueryを使用してヘッダーにクラスを追加しました。私は各スタイルに2種類の色のロゴが2つあります。オリジナルのものは、スクロールするときに読み込まれるものよりも大きくなります。私はそれらに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; 
 
} 
 
\t 
 
#main-page .site-nav{ 
 
    right:2em; 
 
} 
 
\t 
 
#main-page .site-nav a{ 
 
    color:white; 
 
} 
 
\t 
 
#main-page a.login-nav{ 
 
    background:#2ad4dc; 
 
    padding: 1em !important; 
 
    font-size:0.8em; 
 
    color:black; 
 
} 
 
\t 
 
#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; 
 
} 
 
\t 
 
#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を示す/隠し、および#logo2{ display:none }としていることのようです。

代わりに、img要素が1つしかなく、src属性を新しい画像のURLで変更することもできます。第2の画像の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>