jQuery 하단 위치 또는 전환 전환?

Question

해결 방법을 찾을 수없는 문제가 있습니다.

나는과 같이 사업부에서 4 개 아이콘이 있습니다

<div class="icons"> 
    <img id="planung" src="assets/images/charts/ablauf/planung.png" /> 
    <img id="machbarkeit" src="assets/images/charts/ablauf/machbarkeit.png" /> 
    <img src="assets/images/charts/ablauf/entwicklung.png" /> 
    <img src="assets/images/charts/ablauf/innovation.png" /> 
</div> 

지금 그래서 같은 높이와 0의 폭이 위의 텍스트 상자가 있습니다

<div class="ablauftext" id="planungtext"> 
     ASD 
</div> 
<div class="ablauftext" id="machbarkeittext"> 
     ASD 
</div> 

텍스트 상자는을 아이콘 위에 애니메이션. 예를 들어 "planungtext"는 아이콘 "planung"의 왼쪽 위에 정렬됩니다. 아이콘 div는 너비가 80 %이고 아이콘 자체는 ​​양쪽 맞춤을 통해 배치됩니다. 이제 모든 아이콘의 위치를 ​​얻기 위해 jQuery를 사용합니다. 이제 문제는 오프셋이 위쪽과 왼쪽 위치 만 가져옵니다. 이제 이러한 위치를 설정하고 높이의 음수 여백을 추가하면 아이콘 상단에 완벽하게 배치됩니다. 문제는 이제, "planung"아이콘을 클릭했을 때 전환이 왼쪽 상단에서 하단 오른쪽으로 진행된다는 것입니다. 당연히 내가 최고 가치를 지니고있다.

이제이 작업 할 수있는 두 가지 :

A)는) 내 아이콘의 하단에 위치보다는 상단 또는 B를 얻을 수있는 몇 가지 방법이 내 전환을 반대하는 몇 가지 방법이 있습니다 ? 반드시 대답하지 않을 수

Answer 1

내 예는 이것이다 : 그래서 당신의 아이콘과 텍스트는 당신이 대신 위치를 찾을 수 JQuery와 .position()를 사용하는 지금 같은 포함 사업부

<div class="icons"> 
    <div class="icon"> 
     <img id="planung" src="assets/images/charts/ablauf/planung.png" /> 
     <div class="ablauftext" id="planungtext"> 
      ASD 
     </div> 
    </div> 
    <div class="icon"> 
     <img id="machbarkeit" src="assets/images/charts/ablauf/machbarkeit.png" /> 
     <div class="ablauftext" id="machbarkeittext"> 
      ASD 
     </div> 
    </div> 
    <div class="icon"> 
     <img src="assets/images/charts/ablauf/entwicklung.png" /> 
    </div> 
    <div class="icon"> 
     <img src="assets/images/charts/ablauf/innovation.png" /> 
    </div> 
</div> 

에있는 당신의 HTML를 다시 포맷 해당 부분을 잘라내어 텍스트 div를 표시하거나 숨길 수 있습니다. .icon 클래스의 이미지와 텍스트는 position:absolute입니다.

추가 정보가 필요하면 의견을 남겨주세요. 더 많은 정보가 필요하면 더 많은 정보가 필요합니다.