jQuery——效果

注意：

1. 在使用动画时，先进行stop，再使用动画。

fade（淡入淡出效果）

• fadeIn（从隐藏到可见）
  1. 如果元素已经显示，改效果不会长生任何变化。
  2. 适用于jQuery隐藏的元素，CSS中声明display：none的元素
  3. 不适用于：visibility：hidden的元素

$(selector).fadeIn(speed,callback)
//speed：可选，规定隐藏到可见的速度。默认为“normal”，可设置：毫秒，show，normal，fast
//callback：可选，函数执行完成后，需要执行的另外函数。

• fadeOut（从可见到隐藏）

同上，只是相反。

• fadeToggle（同时兼具隐藏和显示）

当需要在同样的样式下使用显示和隐藏效果，那么就可以使用。

相关配置同上

• fadeTo（改变指定的透明度）

$(selector).fadeTo(speed,opacity,callback)
//speed：可选，规定透明度的速度，同上。
//opacity:必需，规定要淡入或淡出的透明度介于0.00与1.00之间的数字
//callback：可选，执行完后要执行的其他函数，同上。

hide&show（隐藏显示效果）

• hide（隐藏）

1. 1. 如果被选的元素已经显示，则隐藏改元素。

$(".btn1").click(function(){
  $("p").hide();
});
//可设置参数：
$(selector).hide(speed,callback)
//speed：可选，规定元素从可见到隐藏的速度。默认为0，可设置：毫秒，slow，normal，fast
//callback：可选，hide函数执行完之后，要执行的函数。

• show（显示）

 同上

 

slideDown&slideUp&slideToggle

slide（滑动效果）

• slideDown（向下滑动）

$(selector).slideDown(speed,callback);
//speed：可选，规定效果的时长，取值：毫秒，slow，fast
//callback：可选，效果完成后所执行的函数。

• slideUp（向上滑动）

同上

• slideToggle（两者切换）

如同时需要向上和向下滑动，同时效果完全一样的情况下，可以使用。

animate（自定义动画）

• 可使用所有CSS中的属性集做自定义的动画效果
• CSS属性值是逐渐改变的
• 只有数字值可以创建动画（例如：margin:30px），字符串值无法创建动画（例如：background-color:red)
  
• 可以使用-=或+=来创建相对动画

语法结构1：

$(selector).animate(styles,speed,easing,callback)

styles:必需，规定产生动画效果的CSS样式和值，

• • 使用DOM名称来设置（FontSize而不是font-siza）
  • 如果写入多个值，使用  animate({height:"300px",left:'250px'});

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

speed:可选，规定动画的速度。默认为“normal”

1. •    毫秒：直接输入数字时，是以毫秒来进行计算的。1000毫秒等于1秒
   • “slow”
   • “normal”
   • “fast”

easing:可选，规定在不同的动画点钟设置动画速度的easing函数。

• • • swing
    • inear

callback:可选，在当前动画100%完成后执行的操作。

语法结构2：

$(selector).animate(styles,options)

styles:必须，规定产生动画效果的CSS样式和值（同上）

options:可选，规定动画的额外选项

• • speed——设置动画的速度
  • easing——规定要使用的easing函数
  • callback——规定动画的每一步完成之后要执行的函数
  • step——规定动画的每一步完成后要执行的函数
  • queue——布尔值，知否在效果队列中放置动画。如果为false，则动画将立即开始
  • specialEasing——来时styles参数的一个或多个CSS属性的映射，以及它们对应easing函数。

stop（停止效果）

• 用于停止动画或效果，在它们完成之前。
• 该方法适用于所有jQuery效果函数，包括滑动、淡入淡出、自定义动画

$(selector).stop(stopAll,goToEnd);
//stopAll：可选，是否应该清除动画队列。默认为false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//goToEnd：可选，是否立即完成当前动画。默认为false

 callback（效果完成后执行函数）

• 需要在动画完成后，再执行其他操作时，使用该方法。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

效果连接

• 在一条语句中允许多个jQuery方法，这样的话，浏览器就不必多次。
• 可以节省代码的条数，易读，节省空间。
• 如果过长，可以直接用折行和缩进进行换行再写。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);