CSS中的淡入淡出過渡元素

Question

我正在CSS中的導航欄上工作。 當前，當用戶滾動時，我的徽標（ #cos_logo ）立即消失。 我希望它隨着CSS過渡而逐漸消失。

有人可以解釋我如何使用現有代碼實現這一目標嗎？

http://jsfiddle.net/78a2ro1r/

 $(window).scroll(function(){ $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0); }); 

 #header_nav { background: #1588cb; width: 100%; height: 100px; position: fixed; z-index: 2; top: 0; left: 0; } body { height:1000px } nav { height:100px } nav ul { position: absolute; bottom: 0; margin: 0px; right: 0px; transition: 0.3s; } #header_nav{ height:100px; transition: height .600s ease; } #header_nav.scrolled{ height:78px; } #header_nav.scrolled ul#menu-primary-menu{ bottom:45%; } #cos_logo { padding: 25px 0 0 0; float: right; } #header_nav.scrolled #cos_logo { display:none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="header_nav"> <a id="cos_logo" href="#" title=""><img src="https://placeholdit.imgix.net/~text?txtsize=8&txt=171%C3%9730&w=171&h=30" alt="" width="171" height="30" class="no-scale" /></a> <nav class="primary menu"> <div class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a></li> </ul> </div> </nav> </div> 

Answer 1

您無法像在JavaScript中那樣為CSS中的顯示切換設置動畫。 只需在此處使用opacity ：

#cos_logo {
    transition: opacity .5s;
}

#header_nav.scrolled #cos_logo {
    opacity: 0;
}

演示： JSFiddle

或者，您可以使用jQuery：

$(window).scroll(function() {
    $('#cos_logo').fadeOut(500);
});

演示： JSFiddle