- show hide 修改元素的高、宽、透明度;从左上角高、宽、透明度渐变
- fadeIn fadeOut修改元素的透明度;宽高不变,透明度渐变
- slideUp slideDown 修改元素的高度;宽高渐变,透明度不变
1、都可以指定3种速度参数slow normal fast,分别是0.6 0.4 0.2秒,
1)当使用速度关键字时需要加引号,例如show("fast"),
2)当使用数字作为时间参数不需要加引号,例如show(3000),
show(3000)/hide(3000)的过程如下:从左上角高、宽、透明度渐变
fadeOut(3000)/fadeIn(3000)的过程如下:宽高不变,透明度渐变
slideUp(3000)/slideDown(3000)的过程如下:宽高渐变,透明度不变
在HBuilderX环境中开发,引用了mui,mui的点击事件tap,源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<style>
.mui-btn {
display: block;
width: 120px;
margin: 10px auto;
}
.showDetail{
width: 200px;
height: 200px;
background: pink;
margin: auto;
text-align: center;
display: none;
}
.nextEle {
width: 100px;
height: 50px;
background: skyblue;
margin: 10px auto;
padding: 10px 5px;
}
.nextEle p{
color: #fff;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog(消息框)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">动画效果</button>
</div>
</div>
<div id="detail" class="showDetail">
<p>显示与隐藏内容</p>
</div>
<div class="nextEle">
<p>最后一个元素</p>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
var $obj = $("#detail");
document.getElementById("alertBtn").addEventListener('tap', function() {
if ($obj.is(":visible")) {
// 1、show hide 修改元素的高、宽、透明度;从左上角高、宽、透明度渐变
// 2、fadeIn fadeOut修改元素的透明度;宽高不变,透明度渐变
// 3、slideUp slideDown 修改元素的高度,宽高渐变,透明度不变
// $obj.hide(3000);
// $obj.fadeOut(3000);
$obj.slideUp(3000);
} else {
// $obj.show(3000);
// $obj.fadeIn(3000);
$obj.slideDown(3000);
}
});
</script>
</body>
</html>