显示与隐藏
show()与hide()方法
show()是显示页面中的元素,等同于jQuery代码: $("#p1").css("display","block");
hide()是隐藏页面中的元素,等同于下列jQuery代码: $("#p1").css("display","none");
show()与hide()方法还可以完成有动画效果的显示与隐藏,只需要在方法的括号中加入相应的参数即可,其调用语法格式:
show(speed,[callback])
hide(speed,[callback])
方法中的参数speed表示执行动画时的速度,该速度有3个默认字符值“slow”,“normal”,“fast”,其对应的速度分别是“0.6秒”,“0.4秒”,“0.2秒”;如果不使用默认的字符值,也可以直接写入数字。可选参数[callback]为在动画完成时执行的回调函数,该函数每个元素执行一次。
toggle()方法
该方法的功能就是切换元素的可见状态,即如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态。该方法有三种调用的形式:
形式一,无参数调用格式: toggle()
形式二,逻辑参数调用格式: toggle(switch)
参数switch为一个布尔值,即true或false。当该值为true时,显示元素;否则隐藏元素。
形式三,动画效果调用格式: toggle(speed,[callback])
方法中的参数speed表示执行动画时的速度,该速度有3个默认字符值“slow”,“normal”,“fast”,其对应的速度分别是“0.6秒”,“0.4秒”,“0.2秒”;如果不使用默认的字符值,也可以直接写入数字。可选参数[callback]为在动画完成时执行的回调函数,该函数每个元素执行一次。
无论是show()和hide()还是toggle()方法,当以动画效果切换页面元素可见状态时,其元素的width、height、padding和margin属性都将以动画的效果显示。
滑动
slideDown()与slideUp()方法
要实现元素的滑动效果,需要调用jQuery中的两个方法,一个是slideDown(),另一个是slideUp().
slideDown()方法的格式: slideDown(speed,[callback])
其功能是以动画的效果将所选择的元素的高度向下增大,使其呈现一种“滑动”的效果,而元素的其他属性并不发生变化;参数speed为动画显示的速度,可选项[callback]为动画显示完成后,执行的回调函数。
slideIUp()方法的格式: slideUp(speed,[callback])
其功能是以动画的效果将所选择元素的高度向上减小,同样也是仅改变高度属性.参数speed为动画显示的速度,可选项[callback]为动画显示完成后,执行的回调函数。
slideToggle()方法
在jQuery中,通过slideToggle()方法,无需定义变量,该方法可以根据当前元素的显示状态,自动进行切换,其调用的语法格式:
slideToggle(speed,[callback])
该方法的功能是以动画的效果切换所选择元素的高度,即:如果高,则减小;如果低,则增大。同时,在每次执行动画完成后,可执行一个用于回调的函数。