底图与蒙版的过渡效果transition

我用2种方法写了底图与蒙版的过渡效果

方法一：用js方法

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>transition</title>
    </head>
    <body>
        <div class="part" id="part" style=" 30%;margin: 0 auto;position: relative;">
    <!--此处为底图-->
    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style=" 100%">
    <!--此处为蒙版部分-->
            <div class="maskPart" id="maskPart" style=" 100%;position: absolute;left: 0;bottom: 0;display:none;">
        <!--蒙版图片-->
        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style=" 100%;">
        <!--蒙版文字-->
        <div style="position: absolute;bottom: 0;left: 0; 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">
            <p style="margin: 0;padding: 0;">此处为标题部分</p>
            <p style="margin: 0;padding: 0;">此处为副标题部分</p>
        </div>
    </div>
</div>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </body>
</html>

        $("#part").hover(function () {
            $("#maskPart").fadeIn('solw')
        },function () {
            $("#maskPart").fadeOut('slow')
        });

效果图：http://runjs.cn/detail/cqzb6bir

方法二：用css方法

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>transition</title>
    </head>
    <body>
        <div class="part" id="part" style=" 30%;margin: 0 auto;position: relative;">
    <!--此处为底图-->
    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style=" 100%">
    <!--此处为蒙版部分-->
    <div class="maskPart" id="maskPart" style=" 100%;position: absolute;left: 0;bottom: 0;opacity: 0;">
        <!--蒙版图片-->
        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style=" 100%;">
        <!--蒙版文字-->
        <div style="position: absolute;bottom: 0;left: 0; 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">
            <p style="margin: 0;padding: 0;">此处为标题部分</p>
            <p style="margin: 0;padding: 0;">此处为副标题部分</p>
        </div>
    </div>
</div>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </body>
</html>

        $("#part").hover(function () {
            console.log("opacity=0");
            $("#maskPart").css({
                "transition": "opacity 1s",
                "-webkit-transition": "opacity 1s",
                "-moz-transition": "opacity 1s",
                "-o-transition": "opacity 1s",
                "-ms-transition": "opacity 1s",
                "opacity": "1"
            });
        },function () {
            console.log("opacity=1");
            $("#maskPart").css({
                "opacity": "0"
            });
        });

效果图：http://runjs.cn/detail/yvc7rajt

--------------------------------

我尝试用transition方法写display方法，好像是行不通。于是用opacity方法代替

用js方法：当鼠标悬浮与离开的操作来回重复多次切速度很快，js方法会多次调用，有点繁琐

用css方法：当鼠标执行相同的操作，css只会调用最后一次的操作，比较简洁