Question

我正在为我的tumblr推荐一个推荐的盒子。我有一个小问题。在我的博客上，我有一个浮动在博客div #cage左侧的推荐框。单击“是”时，它会重定向到推荐链接。当你没有，我只是希望div淡出。对我来说，一旦我点击否，它会逐渐淡出，然后#cage div向左移动并替换#recommend所在的空间。有没有办法简单地淡出div，然后一旦淡出，用一个INVISIBLE div替换它（与#recommed的大小相同），它就会淡出＆amp;内容不动？谢谢。这是我到目前为止所做的，希望有人可以提供帮助。

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

Answer 1

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

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

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

Answer 2

你可以尝试

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

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

Answer 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属性。< / p>

JQuery淡出＆amp;内容替换

3 个答案: