jQuery API
.addClass( className [, duration ] [, easing ] [, complete ] )
-
classNameType: String为每个匹配元素的class属性增加一个或多个样式名(空格隔开)。
-
duration (default:
400
)一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) ) -
easing (default:
swing
)Type: String一个字符串,表示过渡使用哪种缓动 函数。 -
completeType: Function()在动画完成时执行的函数。
toggle:blind、bounce、effect、drop
、explode、fade
、fold、highlight、puff
、pulsate、scale
、shake
、slide
fade
、fold、highlight、puff
、pulsate、scale
、shake
、slide
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "blind" );
});
</script>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "clip" );
});
</script>
<script>
$( "#toggle" ).click(function() {
$( "#elem" ).animate({
color: "green",
backgroundColor: "rgb( 20, 20, 20 )"
});
});
</script>
<script>
$( document ).click(function() {
$( "div" ).effect( "bounce", "slow" );
});
</script>
Color Animation
jQuery UI特效内核使用rgb()
, rgba()
,16进制值,甚至颜色名称比如"aqua"
给颜色增加了动画新特性。只需要包含 jQuery UI特效内核文件和.animate()
就可以获得对各种颜色的支持。
支持以下属性:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
columnRuleColor
outlineColor
textDecorationColor
textEmphasisColor
<script>
$( "#toggle" ).click(function() {
$( "#elem" ).animate({
color: "green",
backgroundColor: "rgb( 20, 20, 20 )"
});
});
</script>
.hide()
<script>
$( "button" ).click(function() {
$( "div" ).hide( "drop", { direction: "down" }, "slow" );
});
.removeClass
<script>
$( "div" ).click(function() {
$( this ).removeClass( "big-blue", 1000, "easeInBack" );
});
<script>
$( "div" ).click(function() {
$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>