swing切换动画_Web前端开发(15)——JQuery动画

JQuery动画

jQuery主要提供了三种显示和隐藏元素的方式，分别是：默认方式、滑动方式、淡入淡出方式。

每个方式对应三个方法，即显示、隐藏、切换显示或隐藏。

每个方法都有三个可选参数，分别为speed、easing、fn。

参数

①speed

speed是指动画的速度。它三个预定义的值("slow"，"normal"，"fast")，也可以用表示动画时长的毫秒数值(如：1000)。

②easing

easing用来指定切换效果，默认是"swing"，可用参数"linear"。

• swing的动画执行时效果是 先慢，中间快，最后又慢。

• linear的动画执行时速度是匀速的。

③fn

fn是在动画完成时执行的函数，每个元素执行一次。

<--先定义一段代码供下面操作--><input type="button" value="点击按钮隐藏div" onclick="hideFn()"><input type="button" value="点击按钮显示div" onclick="showFn()"><input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div>

默认方式

①显示隐藏的元素

show([speed,[easing],[fn]])

这个就是'show(speed, [callback])'无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display: none;，这个方法都将有效。

比如让showDiv显示：

function showFn(){    $("#showDiv").show("slow","swing",function(){        alert("显示了...")    });}

②隐藏显示的元素

hide([speed,[easing],[fn]])

这个就是'hide(speed, [callback])'的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

比如让showDiv隐藏：

function hideFn(){    $("#showDiv").hide("slow","linear",function(){        alert("隐藏了...")    });}

③切换显示或隐藏元素

toggle([speed],[easing],[fn])

如果选择的元素是隐藏的，这个方法会将其切换为显示状态；如果选择的元素是显示的，这个方法会将其切换为隐藏状态。

比如切换showDiv的状态：

function toggleFn(){    $("#showDiv").toggle("slow","swing");}

滑动方式

①显示隐藏的元素

slideDown([speed],[easing],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

比如让showDiv显示：

function showFn(){    $("#showDiv").slideDown("slow");}

②隐藏显示的元素

slideUp([speed,[easing],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

比如让showDiv隐藏：

function hideFn(){    $("#showDiv").slideUp("slow");}

③切换显示或隐藏元素

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

比如切换showDiv的状态：

function toggleFn(){    $("#showDiv").slideToggle("slow");}

淡入淡出方式

①显示隐藏的元素

fadeIn([speed],[easing],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

比如让showDiv显示：

function showFn(){    $("#showDiv").fadeIn("slow");}

②隐藏显示的元素

fadeOut([speed],[easing],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

比如让showDiv隐藏：

function hideFn(){    $("#showDiv").fadeOut("slow");}

③切换显示或隐藏元素

fadeToggle([speed,[easing],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

比如切换showDiv的状态：

function toggleFn(){    $("#showDiv").fadeToggle("slow");}