Question

我正在玩jQuery，我想淡出徽标。所以基本上，我想让动画首先淡出徽标，然后慢慢收缩标题，所以我只能看到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");

但这会使包含nav div的标题div消失，我只想淡化徽标。如何选择标题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。

我错过了标题部分的缩小，以及你只想让背景图像（标识）褪色的事实。

我会使用两个元素，一个是#header，另一个是#logo。背景图像将是#logo元素的一部分，而#logo将绝对位于#header内。（使用css z-index属性使其显示在后面或前面。）

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

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

见下文：

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

Answer 2

首先，不要更改元素的id。它几乎没有必要，可以打破各种各样的东西，效率低下。改为添加或删除类。

您可以使用jQuery UI函数switchClass：

为类之间的转换设置动画

$('#header').switchClass('header-full','header-collapse','slow');

NB

您需要让CSS引用标题折叠类而不是ID
您需要安装jQuery UI才能工作。

Answer 3

<style>
#header {
    height: 25px;
    margin:0;
    width:[logo image width in px];
    padding: 5px 0 0 5px; /* no need to put space for logo now in padding!*/
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
}
</style>

<script>
$('#viewmode').click(function() {

  $('#header').fadeOut('slow', function() { 
  /*you can still use fadeTo(1000,0,function(){*/

    // Animation complete.
  });

});
</script>

让它看起来与以下方式相同：你没有给出nav css所以我不能为你做这件事：

<div class='header_wrapper'>
   <div id="header"></div>
   <div id="nav"></div>
</div>

如何淡出课程或背景图片？

3 个答案: