显示与隐藏
- show()
- hide()
<body>
<div>
<span id="span1">我要我的生命得到解放</span>
<span id="span2" style="display:none;">如今我已不在感到迷茫,我想要怒放的生命,就像伫立在彩虹之巅</span>
<input id="input1" type="button" value="显示"/>
</div>
<script>
$(function(){
$("#span").css("display","none");
$("#input1").click(function(){
if($(this).val() == '显示'){
$("#span2").show();
$(this).val("隐藏");
}else{
$("#span2").hide();
$(this).val("显示");
}
})
});
</script>
</body>
- show(speed,[callback])
hide(speed,[callback])
speed,表示执行动画时的速度,默认有三个值,slow(0.6s)、normal(0.4s)、fast(0.2s),如果不使用默认值,也可以直接输入数字,代表毫秒数,show(3000)在使用show()和hide()方法时,需要先对当前状态进行检测(显示或隐藏),有点麻烦,因此jquery还提供了一个函数toggle()
toggle()
功能:切换当前元素的可见状态,显示时点击变为隐藏,隐藏时点击变为显示
toggle(switch)
switch,即开关状态,true----显示、false------隐藏
toggle(speed,[callback])
(同show(speed,[callback]))
<div class="div1 csc">无参数</div>
<div class="div2 csc" >开关参数</div>
<div class="div3 csc">带速度的参数</div>
<script>
$(function(){
$("#input2").click(function(){
$(".div1").toggle();
$(".div2").toggle(false);
$(".div3").toggle(2000, function(){
$(this).css("border","2px yellow solid")});
});
});
</script>
说明:无论是show()和hide()还是toggle()方法,当以动画效果切换页面元素可见状态时,其元素的width、height、padding、margin属性都将以动画的效果展示
滑动
slideUp(speed,[callback])
功能:以动画的效果将所选择元素的高度向上减小,同样也是仅仅改变高度属性
slideDown(speed,[callback] )
功能:以动画的效果将所选择的元素的高度向下增大,使其呈现一种向下滑动的效果,而该元素的其他属性不发生变化 注意:无论是slideUp()还是slideDown(),其动画效果仅仅只是较小或增加元素的高度,如果元素有padding和margin值,这些属性也会以动画效果一起发生变化
slideToggle(speed,[callback] )
功能:根据当前元素的显示状态,自动进行切换。即以动画效果切换所选元素的高度,如果高,则减小,如果低,则增大
<body>
<input id="input1" type="button" value="显示"/>
<input id="input2" type="button" value="隐藏" />
<input id="input3" type="button" value="toggle" />
<div class="csc"></div>
<script>
$(function(){
$("#input1").bind("click",function(){
$(".csc").slideUp(3000);
})
$("#input2").bind("click",function(){
$(".csc").slideDown(3000);
})
$("#input3").bind("click",function(){
$(".csc").slideToggle(3000);
})
});
</script>
</body>
淡入淡出
与show()和hide()方法相比,fadeIn()和fadeOut()方法虽然也是为了切换元素的显示状态,但是后者并不修改元素的宽高属性,只是改变元素的透明度
fadeIn(speed,[callback])
功能:通过增加元素的透明度,实现淡入的效果(透明度1.0–>0.0)
fadeOut(speed,[callback])
功能:通过减小元素的透明度,实现淡出的效果(透明度0.0–>1.0)
fadeTo(speed,opacity,[callback])
功能:将所选择元素的不透明度一动画的效果调整到指定的不透明度值,动画完成时,可以执行一个回调函数
<body>
<input id="input1" type="button" value="淡入"/>
<input id="input2" type="button" value="淡出" />
<input id="input3" type="button" value="toggle" />
<div class="csc"></div>
<script>
$(function(){
$("#input1").bind("click",function(){
$(".csc").fadeIn(1000);
})
$("#input2").bind("click",function(){
$(".csc").fadeOut(1000);
})
$("#input3").bind("click",function(){
$(".csc").fadeTo(2000,0.5,change());
})
function change(){
$(".csc").css("background-color","yellow");
}
});
</script>
</body>
自定义动画
上面几节介绍的都是元素局部属性发生变化,如高度、宽度、可见性等。在jquery中,也允许用户自定义动画效果,使用通过animate()方法,可以制作出效果更优雅,动作更复杂额页面动画效果。
animate(param,[duration],[easing],[callback])
param—-用于制作动画效果的属性样式和值的集合
可选项duration—–表示三种默认的速度字符,slow、fast、normal或者自定义的数字
可选项easing—-为动画插件使用,用于控制动画的表现效果,通常有linear、swing字符值
callback—-动画完成后,执行的回调函数
<body>
<input id="input1" type="button" value="动画"/>
<div class="csc"></div>
<script>
$(function(){
$("#input1").bind("click",function(){
$(".csc").animate({width:"40%",height:"300px"},3000,change());
})
function change(){
$(".csc").css("background-color","yellow");
}
});
</script>
</body>
移动位置的动画
通过animate()方法,不仅可以用动画效果增加元素的长与宽,还能以动画效果移动页面中的元素,即改变其相对位置,如:
$("#input2").bind("click",function(){
$(".csc").animate({left:"40px",top:"100px"});
})
说明:在动画animate()中,第一个参数params在表示动画属性时,需要采用“驼峰命名法”,如果是font-size,必须写成“fontSize”才有效,否则报错。
$("#input2").bind("click",function(){
$(".csc").animate({marginLeft:"+=40px"},3000); //向右移动40px
})
注意:要使页面中的元素以动画的效果移动,必须先将该元素的“position”属性设置成为“relative”或“absolute”,否则无法移动该元素。
队列中的动画
所谓队列中的动画,是指在元素中执行一个以上的多个动画效果,即有多个 animate()方法在元素中执行,因此,根据这些animate()方法执行的先后顺序,形成了动画队列产生队列后,动画的效果便按队列的顺序进行展示
$("#input2").bind("click",function(){
$(".csc").animate({marginLeft:"+=40px"},3000) //向右移动40px
.animate({marginLeft: "-=30px"},"slow") //向左移动30px
.animate({marginTop: "+=40px"},"fast"); //向下移动40px
})
动画停止和延时
在jquery()中,通过animate()可以实现元素的动画显示,但在显示过程中,执行动画时,可通过stop()方法停止或delay()方法延时某个动画的执行
* stop([clearQueue],[gotoEnd])
功能:该方法的功能是停止正在执行的动画,其中可选参数【clearQueue】是一个布尔值,表示是否停止正在执行的动画,另外一个可选参数[gotoEnd]也是一个布尔值,表示是否立即完成正在执行的动画。
* delay(duration,[queueName])
功能:该方法的功能是设置一个延时值来推迟后续队列中动画的执行,其中参数duration为延时的事件值,单位是毫秒。可选参数【queueName】表示队列名词,即动画队列