一.jQuery的动画显示或不显示
方法
隐藏:hide() 显示:show()
源代码如下:
$(document).ready(function(){
$("#button1").click(function(){
$ ( "p").hide(500,function(){
alert("隐藏完成")
})
})
$("#button2").click(function(){
$( "p").show(200,function(){
alert("显示成功")
})
})
二.jQuery动画的滑动效果
方法:#slide 和 #panel
代码如下:
#slide,#panel{
padding: 5px;
text-align: center;
background-color: #33b5e5;
border: solid 1px red;
}
#panel{
display: none;
padding: 40px;
}
三.jQuery的动画效果(动画)
方法: animate()用于创建自定义动画
语法: $(select).animate({params},speed,callback) 必须的params参数定义形成动画的CSS属性 而且可选的参数和其几个参数相同。
1. 通过animate()使效果向右移动200。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"20px"},1000,function(){
$("div").css({background:"yellow"})
})
})
})
注意:
默认情况下,所以的HTML元素有一个静态的位置,且是不可移动的,如果需要改变,那么需要将元素的position的属性设置为:absolute,relatIve,fixed;
2. 通过animate(),操作多个属性 代码实现。
$(document).ready(function(){
$("#button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'
})
})
})
注意: 使用animate()方法的时候,必须使用camel标记法书写所有的属性名。【CSS:background-color camel:backgroundColor】
3. animate():使用相对值。
$(document).ready(function(){
$("#button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'
})
})
})
四.jQuery停止动画(暂停)
方法: stop()
【注意: stop()用于在动画完成前对他进行停止。只能暂停队列中的一个动画,如果队列有多个动画,那么暂停该动画,然后系统会执行后面的动画。】
实现代码如下:
$(document).ready(function(){
$("#button").click(function(){
var div= $("div")
div.animate({height:"160px" ,opacity:"0.5"},1000)
div.animate({fontSize:"2px" },1000)
div.animate({width:"160px" ,opacity:"0.9"},1000)
div.animate({height:"100px" ,opacity:"0.5"},1000)
17:01 2019/4/9 div.animate({height:"100px" ,opacity:"0.9"},1000)
div.animate({fontSize:"10px" },1000)
$("#button1").click.(function(){
$("div").stop()
})
})
})
五. jQuery-----链(chaining)
通过jQuery可以把方法链接到一起chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)。
$(“p”).css({color:“red”,slideUp(1500),slideDown(1500).animate({backgroundColor:“bule”}1000)
释义:#p1元素首先会变红,然后向上以1,5秒的速度移动,然后向下以1.5秒的速度移动。最后将背景色变为红色。
如果我们不同链,那么我们的写法是:
$("#p1").css({color:“red”})
$("#p1").slideUp{1500}
$("#p1").slideDown{1500}
$("#p1").animate({backgroundColor:“bule”}1000)
chaining的优点:
浏览不用多次去查找相同的元素