javascript 수직 압축 애니메이션 구현

1514 단어
MyAnimate.timer = null;
//    
MyAnimate.inc = 2;
MyAnimate.speed = 10;
//  
MyAnimate.unfold = function (id, max, inc,speed) {
    inc = inc || this.inc;
    speed = speed || this.speed
    var h = $('#' + id).height()
    if ( h < max ) {
        $('#' + id).height(h + inc)
        clearTimeout(MyAnimate.timer);
        timer = setTimeout('MyAnimate.unfold("' + id + '",' + max + ',' + inc + ','+speed+')', 10)
    }
};
//    
MyAnimate.fold = function (id, min, inc,speed) {
    inc = inc || this.inc;
    speed = speed || this.speed
    var h = $('#' + id).height()
    if ( h > min ) {
        $('#' + id).height(h - inc)
        clearTimeout(MyAnimate.timer);
        timer = setTimeout('MyAnimate.fold("' + id + '",' + min + ',' + inc +','+speed+ ')', 10)
    }
};

(function () {
    //    、  ,   id
    $(document).on('click', '[detail-collapse]', function () {
        var state = $(this).attr('detail-collapse');
        if ( state == '0' ) {//  ,    
            MyAnimate.unfold('prizeStateId', 84)
            $(this).attr('detail-collapse', 1)
            $(this).text('    ')
        }

        else {//  ,    
            MyAnimate.fold('prizeStateId', 0)
            $(this).attr('detail-collapse', 0)
            $(this).text('  ')
        }

    })
})()

좋은 웹페이지 즐겨찾기