jQuery效果

一、显示和隐藏

在jQuery中可以使用hide()和show()方法来显示和隐藏HTML元素,以及使用toggle()方法切换hide()和show()方法。

1、hide()方法和show()方法

$().hide(speed,callback)
$().show(speed,callback)

说明:hide()方法就是把元素的display属性设置为none;show()方法就是把所选元素的display属性设置为还原为隐藏之前的显示状态(block、inline、inline-block等);参数speed为必选参数,表示动画执行的速度,单位是毫秒;参数callback为可选参数(可以省略),表示动画执行完成之后要执行的“回调函数”。

2、toggle方法

$().toggle(speed , callback);

说明:toggle()方法用来“切换”元素的显示状态,显示被隐藏的元素,隐藏已显示的元素;参数speed表示动画执行的速度,单位是毫秒; 参数callback为可选参数(可以省略),表示动画执行完成之后要执行的“回调函数”。

二、淡入和淡出

在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

1、fadeIn()方法和fideOut()方法

(1)fadeIn()方法用于淡入已隐藏的元素:

$().fadeIn(speed,callback);

(2)fadeOut()方法用于淡出已隐藏的元素:  

$().fadeOut(speed , callback);

说明:可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。默认毫秒数200毫秒。可选的 callback 参数是动画执行之后所要执行的回调函数。 

(友情提示:hide()隐藏的效果是从下到上或从右下到左上慢慢折叠缩小,而fadeOut的淡出效果是整体淡化直至消失。) 

2、fadeToggle()方法

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

$().fadeToggle(speed,callback);

说明:可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画执行之后所要执行的回调函数。

3、fadeTo()方法

fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$().fadeTo(speed,opacity,callback);

说明:可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
必须的opacity参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是动画执行之后所要执行的回调函数。


三、滑上和滑下

在浏览器网页中,我们经常会见到具有滑动效果的下拉菜单,点击这里,隐藏/显示面板。

1、sideUp方法和sideDown方法

sideUp方法可以 实现滑上效果, sideDown方法可以实现滑下效果:

$().slideDown(speed , callback)
$().slideUp(speed , callback)

说明:speed为可选参数,表示动画执行的速度,单位为毫秒,默认值为200毫秒。如果参数省略,则采用默认速度。 callback为可选参数,表示动画执行完成之后的回调函数。

2、sideToggle方法

sideToggle方法用于切换滑上和滑下效果:

$().slideToggle(speed,callback);

说明:speed为可选参数,表示动画执行的速度,单位为毫秒,默认值为200毫秒。如果参数省略,则采用默认速度。 callback为可选参数,表示动画执行完成之后的回调函数。 


 四、动画

1、animate()方法

在使用jQuery动画时,若要实现更加丰富的效果,可以使用animate()方法自定义动画。

$().animate({params},speed,callback);

说明:必须的params参数定义形成动画的css属性;可选的speed参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;可选的 callback 参数是动画完成后所执行的函数名称。

(1)操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

(2)使用相对值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

(3)使用预定义值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

(4)使用队列功能

$().animate().animte()…….animte()
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

2、stop()方法

jQuery stop()方法用于在动画或效果完成前对它们进行停止。

$().stop(stopAll,goToEnd);

说明:用得比较多的是stop()和stop(true)这2种形式

参数取值 s说明 
 stop()等价于stop(false,false),仅仅停止“当前执行”这段动画,后面的动画还可以继续执行 
 stop(true) 等价于stop(true,false),停止所有动画,包括当前执行的动画
 stop(true,true) 停止所有动画,但是允许执行当前动画
 stop(false,true) 停止“当前执行”这段动画,然后调到最后一个动画,并且执行最后一个动画

3、delay()方法

在jQuery中,如果我们想要对动画进行延迟操作,可以用delay()方法来实现。

$().delay(speed)

说明:参数speed,表示动画的速度,单位为毫秒。


上一篇: jQuery事件
下一篇: jQuery选择方法
作者邮箱: 203328517@qq.com