Empêcher div de sauter sur fadein

Question

J'utilise jQuery pour fondre dans une légende sur un passage de souris icône.

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

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

et 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; 
} 

Lorsque les feux mouseover il fonctionne mais le <div><img src="screens/001.jpg /></div>

est poussé vers le bas. Je veux rester en place et le view_site_caption div juste se fanent dans

Answer 1

Donnez que "div" une classe d'identité ou Css.

<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 avec le positionnement absolu:

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

Answer 2

Vous ne savez pas si vous voulez que le #vc1 occupe toujours le même espace, ou si vous voulez qu'il apparaisse au-dessus des autres.

Pour la première option, retirer display:none; et au lieu mettre opacity-0, et utiliser fadeTo("slow", 1) par exemple.

Pour la deuxième option, vous voulez probablement utiliser position:absolute; sur #vc1, position:relative; sur #p1 afin que vous puissiez le positionner dans ce div, ajoutez simplement bottom:0; left:0; par exemple, si c'est le point dans #p1 où vous voulez #vc1 être mis.