클릭하여 텍스트 링크를 회전

Question

나는 초보자 인 javascripting입니다. 나는 텍스트 링크를 클릭 할 때 컨테이너 내에서 위아래로 움직이는 div를 코딩하는 법을 알고 싶다.

내가 이해할 수없는 텍스트 회전 부분입니다. 나는 jquery를 사용하여 div의 위아래로 움직이기 위해 CSS 상단 조정을 사용할 수 있다고 생각합니다.

그러나 나는 어떻게 스크립트를 해야할지 모르겠다 .click 함수> 트리거 div, 화살표 텍스트가 위로 회전 ^, 트리거 div 위로, 화살표 텍스트가 아래로 회전 v (또는 아래쪽 화살표 v 인 원래 상태로 돌아 감).

jQuery: Toggle rotate div on click function if() 문을 사용하는 방법을 알고 있다면 위와 비슷한 대답을 찾을 수 있습니다. 나는 무엇을 넣을 지 알아낼 수 없다! T_T

예를 들어 상단 검정색 패널이 this website 인 경우 페이지 오른쪽에 숨기기/표시 또는 위/아래로 움직이게하는 작은 화살표 탭이 있습니다.

Answer 1

이와 비슷한?

예를 작업하는 것은 여기에 있습니다 : http://jsfiddle.net/GaJBy/1/

는 제 3 자 jQueryRotate 플러그인 (http://www.nealfletcher.co.uk/js/jQueryRotate.js)를 사용하여 있음을 유의하시기 바랍니다.

CSS :

#outerDiv { 
    position: relative; 
    height: 300px; 
    width: 300px; 
    background: #FFF; 
    border: 1px solid #A0A0A0 
} 

#innerDiv { 
    position: absolute; 
    border: 1px solid #CCC; 
    width: 50px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center; 
    font-size: 36px 
} 

HTML :

<div id="outerDiv"> 
    <div id="innerDiv">↓</div> 
</div> 

JS :

$("#innerDiv").click(function() { // Attach click listener 
    var duration = 500; 
    // If the square is not at the top, go down otherwise go back up  
    if (parseInt($(this).css("top")) > 0) { 
     finalPosition = 0; 
     startingAngle = 180; 
     endingAngle = 0; 
    } else { 
     finalPosition = $("#outerDiv").height() - $(this).height(); 
     startingAngle = 0; 
     endingAngle = 180; 
    } 

    $(this).rotate({ 
     angle: startingAngle, 
     animateTo: endingAngle, 
     duration: duration 
    }); 

    $(this).animate({ 
     top: finalPosition 
    }, duration); 
});