开发者

JQuery Fade out & content replace

开发者 https://www.devze.com 2023-02-25 16:56 出处:网络
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 y

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

0

精彩评论

暂无评论...
验证码 换一张
取 消