渐入效果实现

思路

首先我们来幅图解析下渐入效果的原理：

由图可以看出，整个渐入的效果分为三层，分别为：最外层、内容包裹层和内容层。其中最外层、内容包裹层和内容层三层的宽高是一致的。
开始状态下，最外层和内容包裹层均将超出的部分隐藏，这样其实最开始的时候只能看见最外层左边的50%和内容包裹层左边的50%，内容是完全看不见的。首先我们将内容包裹层宽度设置为最外层的50%，内容距离右边为最外层的50%，其次将内容包裹层的宽度逐渐加到与最外层的宽度相等，让其和最外层重合，同时将内容向右移动最外层宽度的50%，让三层重合，这样就实现了渐入的效果。
下面我们依旧上代码：

<div class="content-wrap">
    <div class="content-inner">
        <div class="content"></div>
    </div>
</div>

.content-wrap{
    position: relative;
    width: 120px;
    height: 120px;
}
.content{
    background: #ff3300;
}

$(function(){
    var time = 600; // 设置渐入速度
    easeIn($(".content-wrap"),$(".content-inner"),time);
})
/*
 *功能：实现渐入效果
 * param1：最外层（content-wrap）
 * param1：内容包裹层（content-inner）
 * param1：速度时间控制
 * */
function easeIn(param1,param2,param3){
    var widthWrap,
        heightWrap,
        bgWrapSon;

    widthWrap = param1.width();
    heightWrap = param1.height();
    bgWrapSon = param2.children();
    param2.css({
        "position":"absolute",
        "top":"0",
        "right":"0",
        "display":"block",
        "width":widthWrap/2,
        "height":heightWrap,
        "overflow":"hidden"
    });
    bgWrapSon.css({
        "position":"absolute",
        "top":"0",
        "right":widthWrap/2,
        "width":widthWrap,
        "height":heightWrap
    });

    param2.animate({
            "width":widthWrap
        },
        {
            duration:param3,
            easing:"linear"
        }
    )
    bgWrapSon.animate({
            right:"0"
        },
        {
            duration:param3,
            easing:"linear"
        }
    )
}

实现效果：
这里实现效果我不截图了，动画的截了也没啥意思，需要看的同学复制代码运行下即可，这个跟PPT里面的渐入效果是一样的，记得引入jQuery文件。

有更好实现方法的同学请留言指教，谢谢!