Javascript JQuery淡出&；内容替换

我目前正在为我的tumblr制作一个推荐框。不过我有个小问题。在我的博客上，我有一个推荐框，浮动在博客div的左侧，

#cage

。单击“是”时，它将重定向到推荐链接。当你按“否”时，我只想让div淡出。对我来说，单击“否”后，它会很好地淡出，但随后

#cage

div移到左侧，并替换

#recomment

所在的空间。有没有办法简单地淡出div，然后一旦淡出，用一个不可见的div（与

#推荐的
大小相同）替换它，使其淡出&内容不会移动？谢谢这是我到目前为止所拥有的，希望有人能帮助我

    <div id="recommend">
<img id="Recommend" src="http://i56.tinypic.com/2z7nz9e.png" usemap="#Recommend" border="0" width="200" height="200" alt="" />
<map id="Recommend" name="Recommend">
<area shape="rect" coords="78,113,142,163" href="http://www.tumblr.com/directory/recommend/entertainment/epicjamess" alt="Yes" title="Yes"    />
<div id="no"><area shape="rect" coords="144,113,195,163" href="#" alt="No" title="No" /></div>
</map>
</div>
<script>
  $("#no").click(function () {
  $("#reccommend").fadeOut("fast");
  });
}  
</script>


$（“#否”）。单击（函数（）{
美元（“#推荐”）。淡出（“快速”）；
});
}  
更改不透明度，而不是褪色：

$("#reccommend").animate({opacity: 0}, 200);

第二个参数是动画的持续时间（毫秒）。
U可以尝试

$("#reccommend").animate({opacity: 0}, fast );

但请记住，不透明不是所有浏览器都支持的。
不透明也会导致IE中的文本出现问题。。。也许可以试试这个：

<script>
  $("#no").click(function () {
    //wrap it in a div with an id
    $("#reccommend").wrap('<div id="reccomend-wrap" />');

    //set width of the wrapper to match width of #reccomend, and float it
    $("#reccommend-wrap").width($("#reccomend").width()).css("float","left");

    //now fade the #recommend out
    $("#reccommend").fadeOut("fast");
  });
}  
</script>


$（“#否”）。单击（函数（）{
//将其包装在一个带有id的div中
$（“#建议”）。包装（“”）；
//将包装的宽度设置为与#reccomend的宽度匹配，并使其浮动
$（“#reccomend”）.width（$（“#reccomend”）.width（））.css（“float”，“left”）；
//现在淡出#推荐
美元（“#推荐”）。淡出（“快速”）；
});
}  

编辑：为了防止跳跃，最好让#reccomend wrap在CSS文件中使用与#reccomend相同的CSS，而不是动态添加float属性。
你能说说它是如何工作的吗？打破东西的方法有很多；）$（“#否”）。单击（函数（）{$（“#建议”）。设置动画（{opacity:'0'}，200）；}）不执行任何操作。请参阅此演示：。可能是因为一个错误，您的代码根本无法工作。它在你的网站上运行吗？不，它在tumblr上运行$（“#否”）。单击（函数（）{$（“#建议”）。设置动画（{opacity:0}，200）；}）；应该有用，对吗/