предотвращение прыжка на fadein

Question

Я использую jQuery, чтобы исчезнуть в заголовке на значке мыши.

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

Вот 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> 

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

Когда mouseover пожары это работает, однако <div><img src="screens/001.jpg /></div>

выталкивается вниз. Я хочу, чтобы оставаться на месте, а view_site_caption ДИВ просто исчезать в

Answer 1

Дайте что «Див» удостоверение или 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> 

Стиль его с абсолютным позиционированием:

.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

Не уверен, что вы хотите, чтобы #vc1 занимал одно и то же место, или если вы хотите, чтобы он появился поверх других вещей.

Для первого варианта, удалить display:none; и вместо того, чтобы установить opacity к 0, и использовать fadeTo("slow", 1), например.

Для второго варианта, вы, вероятно, хотите использовать position:absolute; на #vc1, position:relative; на #p1, так что вы можете поместить его в этом div, то просто добавьте bottom:0; left:0; к примеру, если это точка в #p1 где вы хотите #vc1 быть размещены.