css3 水平翻转动画应用 (转自个人百度空间)

function runTransOne(obj,scalex){
    $(obj).css('transform','scaleX('+scalex+')')
}
function tansTran(obj,bl,callback){
    var scalex=bl||0,timeout;
    timeout=setInterval(function(){
        if(!bl){
            scalex+=0.1;
            if(scalex>1){
                scalex=1;
                clearInterval(timeout);
                callback&& callback();
            }
        }else{
            scalex-=0.1;
            if(scalex<0){
                scalex=0;
                clearInterval(timeout);
                callback&& callback();
            }
        }
        runTransOne(obj,scalex)
    },20);
}

function transDiv(obj,callback){
    var tansObj=$(obj);
    tansTran(tansObj,1,function(){
        var obj=tansObj.next();
        obj.show();
        tansTran(obj,0,callback);
    })
}

function transDiv2(obj,callback){
    var tansObj=$(obj);
    tansTran(tansObj,1,function(){
        var obj=tansObj.prev();
        tansTran(obj,0,callback);
    })
}

var changed=0;
function startTransDiv(){
    if(!changed){
        $('.course_face').each(function(){
            if($(this)[0].getBoundingClientRect().top>0){
                changed=1;
                var obj=$(this)
                transDiv(obj,function(){
                    setTimeout(function(){transDiv2(obj.next())},1500);
                });
            }
        })
    }
}

$(function () {
    var timeouts;
    $(window).scroll(function(){
        clearTimeout(timeouts);
        timeouts=setTimeout(startTransDiv,100);
    });

    $('.course_face').on('mouseenter',function(){
        transDiv($(this));
    });
    $('.course_back').on('mouseleave',function(){
        transDiv2($(this));
    });

});

html结构

<div class="course_face">
                                <strong class="course_score">445~550</strong>
                                <img class="course_pic " src="http://i2.c.hjfile.cn/lesson/intro/201312/e14987fa-64c0-4665-85a3-5f9eba858c4f.png" alt="">
                            </div>
                            <div class="course_back">aaaaaaaaaaa</div>

mishe / blog

css3 水平翻转动画应用 (转自个人百度空间) #25