[ 프론트엔드 / css, jquery ] 버튼 애니메이션

프로젝트를 진행하면서  버튼에 마우스를 올리면,

최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다.

 

무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :)

 

1. 시도했던 방법

처음에 저는 아래와 같이 스타일을 주었습니다.

 

a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다.

b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다
자연스럽게 이동되도록 transition 효과도 주었습니다:)

 

이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover 되어 이상하게 스타일이 적용되었습니다.

 

animation을 주어 해결해보려 했으나,

노란색 버튼에 이벤트를 주는 것이라 당연하게도 위와 같은 문제가 그대로 발생하였습니다.

 

 

2. 해결한 방법

그래서 저는 아래와 같은 방법으로 문제를 해결 하였습니다.

 

a. 3개의 버튼을 position: absolute를 주어 나란히 위에 배치합니다.
   [ 투명한 버튼 - 노란색 버튼 - 회색 버튼 ] * 왼쪽부터 제일 상단에 위치한 버튼입니다.

b. 노란색 버튼이 아닌, 투명한 버튼에 hover와 focus 가 발생하면 노란색 버튼이 이동하도록 jquery를 통해 구현하였습니다.

   
    <div class="btn_wrap">
        <a href="#" class="btn btn1">button</a> <!-- 회색 버튼 -->
        <a href="#" class="btn btn2">button</a> <!-- 노란색 버튼 -->
        <a href="#" class="btn btn3"></a> <!-- 투명 버튼 -->
    </div>
 
    <script>
        $(document).ready(function(){
            $('.btn3').on('mouseover focus', function(){
                $('.btn2').css({'left': '-101%'});
            });
 
            $('.btn3').on('mouseleave blur', function(){
                $('.btn2').css({'left': 0});
            });
        });
    </script>

 

 

3. 마치며

좀 더 좋은 방법이 있는지 다시 생각해보고 업데이트하도록 하겠습니다:)

다음 글에는 ajax를 활용하여 웹 페이지의 일부분을 갱신했던 방법을 공유하겠습니다.

 

 

 

 

 

 

 

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기