JQuery - 점퍼 램프(글자 위로 뒤집기 - 포장)

다른 사람으로부터 전재:https://blog.csdn.net/z69183787/article/details/12857587

(function($){
    $.fn.extend({
        "slideUp":function(value){
            
            var docthis = this;
            // 
            value=$.extend({
                 "li_h":"30",
                 "time":2000,
                 "movetime":1000
            },value)
            
            // 
            function autoani(){
                $("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
                    $(this).css("margin-top",0).appendTo(".line");
                })
            }
            
            // 
            var anifun = setInterval(autoani,value.time);
            
            // ， 
            $(docthis).hover(function(){
                clearInterval(anifun);            // 
            },function(){
                setInterval(autoani,value.time);    // 
            })
        }    
    })
})(jQuery)

주요 사고방식:
슬라이딩 애니메이션은 요소의 위치를 바꾸는 것이다. 요소의 위치를 바꾸려면 두 가지 방법이 있는데 하나는 left, top 속성(상대적 포지셔닝과 절대적 포지셔닝)을 바꾸는 것이다. 그리고 하나는 현재 여기에서 사용되고 있는margin의 값을 바꾸는 것이다.
위의 애니메이션 프로세스:
　　　　1.margin-top을 바꿀 값 설정하기;
　　　　2.animate 방법으로 첫 번째 LI의margin-top 값을 -30으로 변경합니다(마이너스 값은 위로 이동합니다).
　　　　3.애니메이션이 완성된 후, 리셋 함수에서 현재 첫 번째 LI의margin-top을 "0"으로 변경합니다
　　　　4.현재 이 첫 번째 LI를 모든 LI의 마지막 LI로 이동합니다.(완벽한 구현)