preventing div jumping on fadein

I use jQuery to fade in a caption on a icon mouseover.

$("#v1").mouseover(function() 
{
  $("#vc1").fadeIn("slow");
});

Here is the html

<div class="preview_item" id="p1">
    <div class="view_site_caption" id="vc1">View Site...</div>
    <div class="view_site" id="v1"><a href="http://www.delicious.com" target="_blank"><img src="application.png" /></a></div>
    <div><img src="screens/001.jpg" /></div>
</div>

And CSS:

开发者_开发技巧

.view_site_caption
{
    position:relative;
    top:10px;
    left:30px;
    display:none;
}
.view_site
{
    position:relative;
    top:30px;
    left:30px;
}

.preview_item
{
    position:absolute;
    left:-600px;
    top:170px;
}

When the mouseover fires it works however the <div><img src="screens/001.jpg /></div>

Is pushed down. I want it to stay in place and the view_site_caption div to just fade in.

---

Give that "div" an ID or Css class:

<div class="preview_item" id="p1">
    <div class="view_site_caption" id="vc1">View Site...</div>
    <div class="view_site" id="v1"><a href="http://www.delicious.com" target="_blank"><img src="application.png" /></a></div>
    <div id="donotmove"><img src="screens/001.jpg" /></div>
</div>

Style it with absolute positioning:

.preview_item
{
    position:absolute;
    left:-600px;
    top:170px;
}
#donotmove {
    position:absolute;
    left:0px; //play with these numbers
    top:20px; //play with these numbers
}

---

Not sure if you want #vc1 to take up the same space always, or if you want it to appear on top of the other stuff.

For the first option, remove display:none; and instead set opacity to 0, and use fadeTo("slow", 1) for example.

For the second option, you probably want to use position:absolute; on #vc1, position:relative; on #p1 so that you can position it within that div, then just add bottom:0; left:0; for example, if that's the point within #p1 where you want #vc1 to be placed.