Jquery UI effect
效果的使用
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery-ui-1.10.4.custom.js"></script>
<link rel="stylesheet"href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
<style type="text/css">
#content{
border:1px solid #ddd;
width:250px;
height:250px;
}
.green{
background:green;
}
.size{
width:1000px;
height:1000px;
}
</style>
<script>
$(function(){
$("#button1").click(function() {
//第一个参数是效果，第二个是效果的属性值用{}弄起来,相当于css
//如果有多个属性也是写在{}中然后逗号隔开，第三个是设置延时，第四个是方法结束时调用的函数
//其实参数这些关系就相对于继承关系，有一些是自己的有一些是公用的
//第二个参数option(选择)的easing属性是每种效果都有的，可以查看eassing
$("#content" ).effect("bounce",{distance:100,times:1,easing:"easeInBounce"},3000);
});
//用于测试方法覆盖hide() show() toggle()这些方法本来是jquery定义的
//被覆盖后可以按effect的方法使用他们
//toggle()这个方法是如果组件没有就显示有就消失
$("#button2").click(function(){
$("#content" ).toggle("bounce");
});
//addClass()这个方法的第一个参数是类名，用于添加样式
//其中被添加的组件如果定义了该属性那么就没有效果了
//toggleClass()意思是有就设没有就消失
//switchClass()可以add 和remove class,但是使用add必须要给组件设置对应的class
$("#button3").click(function(){
// $( "#content").toggleClass("green",300,"easeOutBounce");
$("#content").switchClass("size","green",3000,"easeOutBounce");
});
});
</script>
</head>
<body>
<h1>effect的使用</h1>
<input type="button"id="button1" value="测试effect"/>
<input type="button"id="button2" value="测试effect方法覆盖"/>
<input type="button"id="button3" value="测试addClass方法覆盖"/>
<p>如果要使用效果可以查看effect的文档，里面有相对应的效果可以使用</p>
<p>可以更改效果的各种参数，在对应的函数中</p>
<div id="content"class="ui-corner-all"></div>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
