I'm currently working on a recommend box for my tumblr. I have a slight issu开发者_运维问答e though. On my blog I have a recommend box that floats on the left of the blog div, #cage
. When you click yes, it redirects to a recommend link. When you hit no, I JUST want the div to fade out. For me, once I click no, it fades out fine, but then the #cage
div moves over to the left and replaces the space that #recommend
was in. Is there any way to just simply fade out the div, then once it's faded out, replace it with an INVISIBLE div, (the same size as #recommed
) to it just fades out & the content doesn't move? Thanks. Here's what I have so far, hopefully someone can help.
<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>
Instead of fading, change the opacity:
$("#reccommend").animate({opacity: 0}, 200);
The second argument is the duration of the animation in milliseconds.
U could try
$("#reccommend").animate({opacity: 0}, fast );
But keep in mind, opacity is not supported by all browsers.
Opacity also causes issues with text in IE... Maybe try this:
<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>
EDIT: To prevent jumpiness it might actually be best to have #reccomend-wrap have the same CSS as #reccomend in your CSS file, rather than adding the float property on the fly..
精彩评论