Скрыть и показать DIV в одном уровне

Question

У меня есть страница JSP, как это: EDIT: http://jsfiddle.net/F4nA9/

<div id="fonctiondetails"> 
    [...] 
    <img onclick="showoption()" ... /> 
    [...] 
</div> 
<div id="addqualite" style="display: none;"> 
    [...]     
</div> 

И моя функция JQuery, чтобы скрыть и показать мои DIVs

function showoption() { 

    $("#fonctiondetails").hide('slide',1000); 
    $("#addqualite").show('slide',1000); 

} 

Проблема заключается в том, что когда мой первый div исчезает, второй div приходит со дна и поднимается вверх и заменяет первый div, но я хочу, чтобы она отображалась на том же уровне, что и первый div, и приходила слева или справа от первого div.

Answer 1

Вы можете увидеть это http://jsfiddle.net/modaloda/F4nA9/1/

div { 
    position: absolute; 
    top: 0; 
} 

#fonctiondetails { 
    z-index: 1; 
} 

Answer 2

Ваши дивизии должны быть в одном и том же месте/уровне в дизайне;

Подумайте, что:

<style> 
    #fonctiondetails{ 
     position: absolute; 
     top:0; 
     left:0; 
    } 
    #addqualite{ 
     position: absolute; 
     top:0; 
     left:0; 
     display:none; 
    } 
</style> 

В этом случае 2 дивы в одном месте и поэтому в то время как пихты ДИВ быть исчезают, второй DIV будет показано. И они не будут влиять на движение, потому что они находятся на одном месте.

Пример стиля должен был показать вам место div. Но вы должны проектировать свои div в соответствии с вашим шаблоном/страницей.

Попробуйте использовать стиль (абсолютные, относительные, статические или фиксированный)

Я думаю, что это будет полезно

Answer 3

Вы можете использовать SetTimeout:

setTimeout(function(){ 
     $("#addqualite").show('slide',1000); 
    },200); 

Answer 4

Я сделал свое решение, создаю контейнер DIV так:

<div id="animateslide"> 
    <div id="fonctiondetails"> ... </div>   
    <div id="addqualite" > ... </div> 
</div> 

и CSS файл, как это:

#animateslide { 
    position: relative; 
    [...] /* it's good to specify a height of your choice */ 
} 

#fonctiondetails { 
    position: absolute; 
    z-index: 1; 
    [...] 
} 

#addqualite{ 
    position: absolute; /* even if we did'nt specify position it's work */ 
    [...] 
}