CSS中的淡色过渡元素
CSS中的淡色过渡元素
提问于 2015-11-15 11:43:58
我正在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-15 11:46:48
您不能像在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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33719296
复制相关文章
相似问题
腾讯云开发者
