블로그 내 검색

2011. 12. 14.

블로그 스크립트 테스트 - 간단한 스크립트 애니메이션


간단한 애니메이션 이벤트 처리

click content


/*
<div class="top_wrapper">
    <div class="menu_area" >
        <div >Item D1</div>
        <div >Item D2</div>
        <div >Item D3</div>
        <div >Item D4</div>
    </div>
    <div class="menu_area" >
        <div >Item D1</div>
        <div >Item D2</div>
        <div >Item D3</div>
        <div >Item D4</div>
    </div>

    ...

</div>
*/
// 먼저 스크립트 https://www.google.com/jsapi를 임포트해야 한다.
var javarouka = function() {
    
    google.load("jquery", "1.7.1");
    google.setOnLoadCallback(applyPostMouseEvent);

    function applyPostMouseEvent() {
        var wrapper = $("div.top_wrapper");   
        var toBind = wrapper.find("div.menu_area div");

        function moveToSibling(e) {
            var target = $(e.target);
            if(!target.is("div")) {
                return;
            }
            var targetParent = target.parent();
            var moveTo;
            if(targetParent.is("div.menu_area")) {
                moveTo = targetParent.next("div");
                if(!moveTo.size()) {
                    moveTo = wrapper.find("> div:first-child");
                }

                // 임시 엘리먼트를 이동할 위치에 추가하여 실제 이동될 오프셋과 실제 크기를 구한다.
                var tmpDiv = 
                    $("<div>")
                    .css({
                        "visibility": "hidden",
                        "width": "60px"
                    })
                    .text(target.text());
            
                moveTo.append(tmpDiv);
                var t = tmpDiv.offset().top
                    l = tmpDiv.offset().left,
                    w = tmpDiv.width(),
                    h = tmpDiv.height

                // 구하고 나면 임시 엘리먼트를 삭제한다.
                tmpDiv.remove();
            
                target
                .css({
                    "position": "absolute",
                    "width": w,
                    "height": h,
                    "top": target.offset().top,
                    "left": target.offset().left
                }).appendTo($(document.body))
                .animate({
                    "top": t,
                    "left": l
                    },
                    function(e) {
                        moveTo.append(target.css({
                            "position": "static",
                            "top": "",
                            "left": ""
                        }));
                    }
                );
            }
        }
        $.each(toBind, function(index, element) {
            $(element).bind("click", moveToSibling);
        });
    }
}

댓글 없음:

댓글 쓰기