jquery - 如何淡出类或背景图像？

Question

我正在使用 jQuery，我想要淡出 Logo 。所以基本上，我想让动画先淡出 Logo ，然后慢慢缩小标题，这样我只能看到 id="nav" div。我尝试使用 SlideToggle，但它似乎只是让我的标题 div 层消失，而不是将其缩小到标题折叠。

<div id="header"><div id="nav"></div></div>
#header {
    height: 25px;
    margin:0;
    padding:85px 0 0 5px;
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
}

#header-collapse {
    padding: 5px 0 0 5px;
    height: 25px;
    margin: 0;
}

<script>
$("#viewmode").click(function(){ 
    $("#viewmode").click(function(){ 
$("#header").attr("id", "header-collapse");
});

</script>

更新:我正在测试这个:

$("#header").fadeTo(1000,0).css("background-image", "none");

但这会淡化包含导航 div 的标题 div，而我只想淡化 Logo 。如何选择标题background-image？

更新:我用它作为链接。如何点击后返回原来的状态？

<a href="#" id="viewmode">View Mode</a> <br /> 
<script> 
$("#viewmode").click(function(){ 
    $("#logo").fadeTo(1000,0);
    $("#logo").animate({'height':'0'},'fast');

});
</script>

Answer 1

尝试

$("#header").fadeTo(1000,0).attr('id','header-collapse')

或者

$("#header").fadeTo(1000,0,function(){$(this).attr('id','header-collapse');});

fadeTo 支持动画完成后的回调函数。

正如有人已经提到的，为元素设置动画不需要更改 ID。

我错过了标题部分的缩小，以及您只想背景图像( Logo )淡出的事实。

我将使用两个元素，一个是 #header，另一个称为 #logo。背景图像将是#logo 元素的一部分，并且#logo 将绝对定位在#header 内。 (使用 css z-index 属性使其出现在后面或前面)。

然后，您可以使用回调并在淡入淡出完成后为标题设置动画。无需使用类来表示开始和结束状态。

回调是指在动画结束时触发的函数。

见下文:

$("#logo").fadeTo(1000,0,function(){
    $(#header).animate({'paddingTop':'5px'},'fast');
});