使用show()和hide()方法
在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。
在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。
jQuery代码：
$(function(){
$("input:first").click(function(){
$("p").hide(); //隐藏
});
$("input:last").click(function(){
$("p").show(); //显示
});
});
</script>HTML代码：
点击按钮，看看效果
一段其它的文字制作多级菜单
jQuery代码:
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作
if($(this).children().is(":hidden")){
//如果子项是隐藏的则显示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子项是显示的则隐藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件
//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>HTML代码:
- 第1章 Javascript简介
- 第2章 Javascript基础
- 第3章 CSS基础
- 第3.1节 CSS的概念
- 第3.2节 使用CSS控制页面
- 3.2.1 行内样式
- 3.2.2 内嵌式
- 第3.3节 CSS选择器
- 第4章 CSS进阶
- 第4.1节 div标记与span标记
- 第4.2节 盒子模型
- 第4.3节 元素的定位
- 4.3.1 float定位
- 4.3.2 position定位
- 4.3.3 z-index空间位置
理解: e.target是引发事件的元素
this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )
if(this==e.target)语句作用。
this指的是定义事件的所有含有ul的li标签。
e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，
所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,
显然是不行的, 你可以去掉判断看看效果就明白了。
使用toggle()方法实现显隐切换
曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;
如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作
$(this).children().toggle();
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件
//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
同样利用toggle()方法以上实例也可以进一步简化: 推荐使用
jQuery代码:
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggle();
});
$("li:has(ul)").find("ul").hide();
});HTML代码:
元素显隐和渐入渐出效果
show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，
也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;
jQuery代码：
$(function(){
$("input:first").click(function(){
$("img").hide(3000); //逐渐隐藏(大小)
});
$("input:last").click(function(){
$("img").show(1000); //逐渐显示(大小)
});
});HTML代码：
与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;
jQuery代码：
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggle(500); //逐渐的显隐
});
$("li:has(ul)").find("ul").hide();
});HTML代码:
使用fadeIn()和fadeOut()方法
fadeIn(duration,[callback]) 渐显(颜色增强)
fadeOut(duration,[callback]) 渐隐(颜色褪色)
其中参数duration和callback与slow()、hide()中的完全相同;
制作渐渐褪色的动画效果:
jQuery代码:
$(function(){
$("input:eq(0)").click(function(){
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function(){
$("img").fadeIn(1000); //逐渐fadeIn
});
$("input:eq(2)").click(function(){
$("img").hide(3000); //逐渐隐藏
});
$("input:eq(3)").click(function(){
$("img").show(1000); //逐渐显示
});
});HTML代码:
使用fadeTo()方法自定义变幻目标透明度;
jQuery代码:
fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0
$(function(){
$("input:eq(0)").click(function(){
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function(){
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function(){
$("img").fadeTo(1000,0.5);
});
$("input:eq(3)").click(function(){
$("img").fadeTo(1000,0);
});
});HTML代码:
当使用fadeOut()方法时,图片完全消失后将不在占用
的空间,
而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记
的空间
幻灯片效果
slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效
slideUp(duration,[callback]) 上滑(消失)
slideDown(duration,[callback]) 下滑(显示)
jQuery代码:
$(function(){
$("input:eq(0)").click(function(){
$("div").add("img").slideUp(1000); //相当于$("div,img")
});
$("input:eq(1)").click(function(){
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function(){
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function(){
$("div").add("img").show(1000);
});
});HTML代码:
停止所有在指定元素上正在运行的动画。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true, 则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。
点击Go之后开始动画,点Stop之后会在当前位置停下来
HTML 代码:
jQuery 代码:
// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});实例：阻止动画播放
Document
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("button").click(function(){
//$("div").stop(true).slideToggle(); //stop(true)阻止重复点击播放
//第二种方法我们称之为函数节流
//我判断你是否在动画中 如果在我就直接终止代码 如果不在那么久继续
/*if(div是否在动画中){
return;
}*/
console.log($("div").is(":animated"));//这个就是判断div是否在动画过程中
if($("div").is(":animated")){
return; //函数节流
}
$("div").slideToggle(3000);
})
</script>
delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。
总结：
1、基本效果
show()：将隐藏的元素显示
show(speed,[callback]) ：以动画的效果显示
hide()：将显示的元素隐藏
hide(speed,[callback]) ：以动画的效果隐藏
toggle()：显示或者隐藏
toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏
toggle(speed,[callback])：以动画的方式显示或者是隐藏
参数说明：
speed：速度 单位为毫秒
"slow", 缓慢
"normal", 正常
"fast" 快速
callback：回调函数 当动画执行完毕以后再来执行的函数
2、滑动效果
slideDown()：将隐藏的元素显示
slideDown(speed,[callback]) ：以动画的方式显示
slideUp()：将显示的元素隐藏
slideUp(speed,[callback]) ：以动画的方式隐藏
slideToggle()：隐藏或显示
slideToggle(speed,[callback])：以动画的方式隐藏或者显示
参数说明：
speed：速度 单位为毫秒
"slow", 缓慢
"normal", 正常
"fast" 快速
callback：回调函数 当动画执行完毕以后再来执行的函数
3、淡入淡出
fadeIn()：淡入
fadeIn(speed,[callback]) ：以动画的方式进行淡入
fadeOut()：淡出
fadeOut(speed,[callback])：以动画的方式进行淡出
fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值
opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明
callback：回调函数 当动画执行完毕以后再来执行的函数
show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换
fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换
slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换
4 停止所有在指定元素上正在运行的动画。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true, 则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。