JQuery Эффект слайда на абсолютном позиционированном Div

Question

У меня возникли проблемы с использованием эффекта слайда (в данном случае - slideToggle) на некотором position:absoluteDivs.

Прежде чем я закончил работу position - мне нужно было это для стрелки границы - она ​​работала идеально. Но после использования position:absolute на divs эффект больше не работает. Итак, я считаю, что это имеет какое-то отношение к эффекту, когда Div не существует?

Мой HTML:

<div style="width: 200px; border-width: 1px; border: dotted" onclick="clickDiv();"> 
    click me 
</div> 
<div id="DivTeste"> 
    <div class="chat-bubble-arrow-border"></div> 
    <div class="chat-bubble-arrow"></div> 
    <div class="teste box"> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
    </div> 
</div> 

Мой CSS:

.box { 
    overflow: auto; 
    display: block; 
    height:100px; 
    width: 200px; 
    border-width: 1px; 
    border: solid; 
    top: 50px; 
    position:absolute; 
} 

.chat-bubble-arrow-border { 
    border-color: transparent transparent #000 transparent; 
    border-style: solid; 
    border-width: 10px; 
    height:0; 
    width:0; 
    position:absolute; 
    top: 30px; 
    left:30px; 
} 


.chat-bubble-arrow { 
    border-color: transparent transparent #fff transparent; 
    border-style: solid; 
    border-width: 10px; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: 30px; 
    top: 33px; 
    z-index: 100; 
} 

И мои JS:

$(function() { 
    $('#DivTeste').hide(); 
}); 

function clickDiv() { 
    $('#DivTeste').slideToggle(); 
} 

Answer 1

Я просто заколдовал код и сделал его работу с относительным положением.

Изменено это два из класса коробки:

top: 16px; 
    position: relative; 

http://jsfiddle.net/sanman/4xsZM/

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

Answer 2

ЗАКАНЧИВАТЬ решение я пытался для вас. В любом случае, вы немного изменили свое кодирование, но ничего серьезного.

click here for JS Fiddle

$(document).ready(function(){ 
 
    $('#click').click(function(){ 
 
     $('#DivTeste').slideToggle(500); 
 
    }) 
 
});

.box { 
 
    overflow: auto; 
 
    display: block; 
 
    height:100px; 
 
    width: 200px; 
 
    border-width: 1px; 
 
    border: solid; 
 
    top: 50px; 
 
    position:absolute; 
 
} 
 

 
#DivTeste{ 
 
display:none; 
 
} 
 

 
.chat-bubble-arrow-border { 
 
    border-color: transparent transparent #000 transparent; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    height:0; 
 
    width:0; 
 
    position:absolute; 
 
    top: 30px; 
 
    left:30px; 
 
} 
 

 

 
.chat-bubble-arrow { 
 
    border-color: transparent transparent #fff transparent; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 33px; 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="click" style="width: 200px; border-width: 1px; border: dotted; cursor:pointer"> 
 
    click me 
 
</div> 
 
<div id="DivTeste"> 
 
    <div class="chat-bubble-arrow-border"></div> 
 
    <div class="chat-bubble-arrow"></div> 
 
    <div class="teste box"> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
    </div> 
 
</div>

Надежда, что помогает.