jquery学习笔记(四):动画

内容来自【汇智网】jquery学习课程

4.1 显示和隐藏

在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

hide()的语法形式:$(selector).hide(speed,callback);

show()的语法形式:$(selector).show(speed,callback);

speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称,两个参数都是可选的。

示例如下:

 <script type="text/javascript">
$(function(){
$("#hide").click(function(){
$("div").hide(1000);
});
$("#show").click(function(){
$("div").show(1000);
});
})
$(function(){//删除a标记中的href属性
$("#a1").removeAttr("href");
})
</script>
...省略代码 <h3> 隐藏和显示</h3>
<input type="button" id="hide" value="点击隐藏">
<input type="button" id="show" value="点击显示">
<div>在夕阳下奔跑,那是我逝去的青春。</div>

4.2 淡入淡出

在jQuery中,可以实现元素的淡入淡出效果。jQuery提供了四种fade方法:fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度(值介于0与1之间)

fadeIn()语法:$(selector).fadeIn(speed,callback);

fadeOut()语法:$(selector).fadeOut(speed,callback);

fadeToggle()的语法:$(selector).fadeToggle(speed,callback);

fadeTo()的语法:$(selector).fadeTo(speed,opacity,callback);

示例如下:

 <script type="text/javascript">
$(function(){//fadeIn()方法
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
})
$(function(){//fadeOut()方法
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
})
$(function(){//fadeToggle()方法
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
})
$(function(){//fadeTo()方法
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
})
</script>
...省略代码
<button>点击这里,看效果</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

4.3 滑动效果

在jQuery中,可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。

slideDown()语法:$(selector).slideDown(speed,callback);

slideUp()语法:$(selector).slideUp(speed,callback);

slideToggle()的语法:$(selector).slideToggle(speed,callback);

参数speed规定效果的时长,可以取值:"slow"、"fast"或毫秒。callback参数是滑动完成后所执行的函数名称。

示例如下:

 <script type="text/javascript">
$(function(){//slideDown()方法
$("button").click(function(){
$("#div1").slideDown("slow");
});
})
$(function(){//slideUp()方法
$("button").click(function(){
$("#div2").slideUp("slow");
});
})
$(function(){//slideToggle()方法
$("button").click(function(){
$("#div2").slideToggle("slow");
});
})
</script>
...省略代码
<div id="div2" style="width:222px;height:83px;background-color:#e5eecc;margin:0px;display:none;">
吃香蕉不薄皮 吃葡萄不吐皮
</div>
<button id="btn" style="width:222px;height:23px;background-color:#e5eecc;margin-bottom:0px">
点击这里,看效果
</button>
<div id="div1" style="width:222px;height:83px;background-color:#e5eecc;margin:0px">
有没有点小小激动呢 想起那在夕阳下奔跑,那..那是我
逝去的青春
</div>

4.4 动画效果

在jQuery中,提供了animate()方法创建自定义的动画

语法:$(selector).animate({params},speed,callback);

params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数,前者规定效果的时长,取值为:"slow"、"fast"和毫秒;后者是动画完成后执行的函数

示例如下:

 <script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
$("#btn").click(function(){
$("div").animate({
height:"200px",
width: "660px"
},"slow",function(){
$("div").animate({
height:"80px",
width: "80px"
},"slow")
});
})
})
</script>
...省略代码 <h3> 动画效果</h3> <input type="button" id="btn" value="点击看效果">
<div style="width:80px;height:80px;background-color:#FF9966"></div>

4.5 停止效果

在jQuery中,提供了stop()方法用于停止动画或效果,在它们完成之前。stop()方法适用于所有的jQuery效果函数,包括滑动淡入淡出和自定义动画。

语法:$(selector).stop(stopAll,goToEnd);

stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行;后者规定是否立即完成当前动画,默认是false。

所以默认地stop()会清除在被选元素上指定的当前动画

 ...省略代码<p></p>
<p><script type="text/javascript">
$(function(){
$("#flip").click(function(){
$("#panel").slideToggle(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
})
</script>
...省略代码</p>
<h3 id="-">动画效果</h3>
<p><button id="stop">停止滑动</button></p>
<div id="flip">
点击这里,向下滑动面板
</div>
<div id="panel">
Hello world!
</div>
...省略代码
上一篇:python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax


下一篇:mac下IDLE无法输入中文的问题