mui有类似jquery 添加元素动画显示隐藏元素的动画效果吗

来源：蜘蛛抓取(WebSpider) 时间：2017-07-13 04:57 标签： mui和jquery冲突
19917人阅读
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
$(&#hide&).click(function(){
$(&p&).hide();
$(&#show&).click(function(){
$(&p&).show();
hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值：&slow&, &fast&, &normal& 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
$(&button&).click(function(){
$(&p&).hide(1000);
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 参数可以设置这些值：&slow&, &fast&, &normal& 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(&.flip&).click(function(){
$(&.panel&).slideDown();
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 参数可以设置这些值：&slow&, &fast&, &normal& 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：
animate({width:&70%&,opacity:0.4,marginLeft:&0.6in&,fontSize:&3em&});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是：&slow&, &fast&, &normal& 或毫秒。
&script type=&text/javascript&&
$(document).ready(function(){
$(&#start&).click(function(){
$(&#box&).animate({height:300},&slow&);
$(&#box&).animate({width:300},&slow&);
$(&#box&).animate({height:100},&slow&);
$(&#box&).animate({width:100},&slow&);
$(selector).hide()
隐藏被选元素
$(selector).show()
显示被选元素
$(selector).toggle()
切换（在隐藏与显示之间）被选元素
$(selector).slideDown()
向下滑动（显示）被选元素
$(selector).slideUp()
向上滑动（隐藏）被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()
淡入被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).animate()
对被选元素执行自定义动画
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：207521次
积分：1690
积分：1690
排名：千里之外
原创：14篇
转载：25篇
评论：13条
(1)(1)(1)(7)(6)(3)(7)(7)(4)(1)(1)使用CSS3动画 animation 来控制元素的显示和隐藏
CSS3中 animation 和 transition 俩样式都能创建动画效果，而且是后台C++执行的，所以效率比普通jQuery的js模拟动画的效率高很多，所以建议大家能用css实现的效果都用css。
transition的使用比较简单，这里就不介绍了，着重为大家介绍下 animation 。
animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：
&!doctype html&
&meta charset="utf-8" /&
&title&css3 animation&/title&
.div{width: 200 height: 200 background: #f00; position:
left: 0; -webkit-animation-fill-mode: -webkit-animation-duration: 1s;
.div.show{ visibility: -webkit-animation-name: slideIn;}
.div.hide{ -webkit-animation-name: slideO}
html, body{height: 100%; margin:0; padding: 0;}
.wrap{width: 960 position: height: 90%; overflow: border: 1px solid #000;}
.btns{position: bottom: 20%;}
@-webkit-keyframes slideIn{
0%{left: 1500}
50%{left: 100}
100%{left: 0;}
@-webkit-keyframes slideOut{
0%{left: 0;}
50%{left: 100}
100%{left: 1500 visibility:}
&div class="wrap"&
&div id="div" class="div"&&/div&
&div class="btns"&
&button onclick="fadeIn()"&出现&/button&
&button onclick="fadeOut()"&隐藏&/button&
function fadeIn(){
div.classList.add('show'),
div.classList.remove('hide');
function fadeOut(){
div.classList.add('hide'),
div.classList.remove('show');
之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。
-webkit-animation-fill-mode: 这个样式是为了动画完成后保留动画完成时的状态，如果不加这个样式的话动画完成后又会弹回原来状态了。
我的animation使用方法就介绍到这里了，各位大神有木有更好的实现方法或者建议，欢迎交流下呗~
人气：3078
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.041 (s). 13 q(s)输入关键字或相关内容进行搜索
问题如题，还有就是mui有没详细介绍选择器的使用文档？？我现在显示隐藏元素是这么写的 muiObj[0].style.display=&block&; 感觉好忧伤。。http://dev./mui/util/#selector
文档好精简。
这个确实目前没有，不过你可以自己用原生封装一下，也不难实现。
要回复问题请先或
关注: 2 人拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(394ee1ca-ua98).
重新安装浏览器，或使用别的浏览器

我要回帖

更多关于 mui和jquery冲突 的文章

 

随机推荐