底图与蒙版的过渡效果transition
Posted 嘴里坚持着逞强，眼里的泪在投降
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了底图与蒙版的过渡效果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="width: 30%;margin: 0 auto;position: relative;"> <!--此处为底图--> <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%"> <!--此处为蒙版部分--> <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;display:none;"> <!--蒙版图片--> <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;"> <!--蒙版文字--> <div style="position: absolute;bottom: 0;left: 0;width: 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="width: 30%;margin: 0 auto;position: relative;"> <!--此处为底图--> <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%"> <!--此处为蒙版部分--> <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;opacity: 0;"> <!--蒙版图片--> <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;"> <!--蒙版文字--> <div style="position: absolute;bottom: 0;left: 0;width: 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只会调用最后一次的操作，比较简洁
以上是关于底图与蒙版的过渡效果transition的主要内容，如果未能解决你的问题，请参考以下文章