一.关于JQuery的动画显示
a.如果被选的元素已被显示,则隐藏该元素。
b.当点击元素时,会发生click事件。
1.显示和隐藏 :hide()和show()
$(document).ready(function(){
$("#button1").click(function(){
$ ( "p").hide(500,function(){
alert("隐藏完成")
})
})
$("#button2").click(function(){
$( "p").show(200,function(){
alert("显示成功")
})
})
二.jQuery的动画效果(滑动)
方法:#slide和#panel
a.规定当ready事件发生时执行的代码。
b.slideToggle():通过滑动效果(高度变化)来切换元素的可见状态。
#slide,#panel{
padding: 5px;
text-align: center;
background-color: #33b5e5;
border: solid 1px red;
}
#panel{
display: none;
padding: 40px;
}
三.jQuery的动画效果(动画)
方法:animate()用于创建自定义动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"20px"},1000,function(){
$("div").css({background:"yellow"})
})
})
})
$(document).ready(function(){
$("#button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'
})
})
})
4.通过animate(),使用队列功能(如果你在彼此 之后向编写多个animate()调用。jQuery会创建包含这些方法调用的“内部”,队列然后逐一运行这些animate调用)
$(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)
div.animate({height:"100px" ,opacity:"0.9"},1000)
div.animate({fontSize:"10px" },1000)
})
})
四.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 命令,一条接着另一条。
提示:这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);