jQuery API

Posted 2020-08-01 小U~

.addClass( className [, duration ] [, easing ] [, complete ] )

• className
  Type: String
  为每个匹配元素的class属性增加一个或多个样式名（空格隔开）。
• duration (default: 400)
  Type: Number or String
  一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
• easing (default: swing)
  Type: String
  一个字符串，表示过渡使用哪种缓动 函数。
• complete
  Type: Function()
  在动画完成时执行的函数。

toggle：blind、bounce、effect、drop、explode、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" );

});

 

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

<script>

$( "div" ).click(function() {

$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );

});

</script>