JQuery 淡出和内容替换答案

【问题标题】：JQuery Fade out & content replaceJQuery 淡出和内容替换
【发布时间】：2011-04-15 20:10:30
【问题描述】：

我目前正在为我的 tumblr 制作推荐框。不过我有一个小问题。在我的博客上，我有一个推荐框漂浮在博客 div 的左侧，#cage。当您单击是时，它会重定向到推荐链接。当你点击 no 时，我只想让 div 淡出。对我来说，一旦我单击“否”，它就会很好地淡出，但随后 #cage div 向左移动并替换了 #recommend 所在的空间。有没有办法简单地淡出 div，然后一次它已经淡出，用一个不可见的 div 替换它，（与#recommed 相同的大小）它只是淡出并且内容不会移动？谢谢。这是我目前所拥有的，希望有人能提供帮助。

    <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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

改变不透明度而不是褪色：

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

第二个参数是动画的持续时间，以毫秒为单位。

【讨论】：

你能说怎么它不起作用吗？有很多很多方法可以破坏某些东西 ;)
什么都不做。
查看此演示：jsfiddle.net/Xc2pz/5。也许您的代码由于错误而根本无法工作。它在您的网站上运行吗？
不，它在 tumblr 上运行。应该可以工作，对吗？ ://

【解决方案2】：

你可以试试

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

但请记住，并非所有浏览器都支持不透明度。

【讨论】：

【解决方案3】：

不透明度也会导致 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>

编辑：为了防止跳动，实际上最好让#reccomend-wrap 在您的CSS 文件中具有与#reccomend 相同的CSS，而不是动态添加float 属性..

【讨论】：