jQuery资料之特殊效果

◆ 常用参数：

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

• 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

◆ 隐藏和显示：

1、hide()和show()

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

隐藏和显示方法

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

注: 第二个参数是一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供"linear" 和 "swing"，

2、toggle()

$(selector).toggle(speed,callback); 

切换 hide() 和 show() 方法

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

◆ 淡入淡出：

1、fadeIn()和fadeOut()

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);

淡入和淡出方法

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

2、fadeToggle()

$(selector).fadeToggle(speed,callback);

在 fadeIn() 与 fadeOut() 方法之间进行切换

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

3、fadeTo()

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

允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

◆ 滑动：

1、slideDown()和slideUp()

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

向下和向上滑动元素

$("#flip").click(function(){
  $("#panel").slideDown();
});


$("#flip").click(function(){
  $("#panel").slideUp();
});

2、slideToggle()

$(selector).slideToggle(speed,callback);

在 slideDown() 与 slideUp() 方法之间进行切换

$("#flip").click(function(){
  $("#panel").slideToggle();
});

◆ 自定义动画：

animate()

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

用于创建自定义动画，需的 params 参数定义形成动画的 CSS 属性。

★ 把 元素往右边移动了 250 像素

$("button").click(function(){
  $("div").animate({left:'250px'});
});

★ 操作多个属性

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

★ 使用相对值

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

注：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

★ 使用预定义的值

// 可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

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

★ 使用队列功能
jQuery 提供针对动画的队列功能。编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列，然后逐一运行这些 animate 调用。

$("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");
});

◆ 停止动画排队：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

• stop() 方法用于停止动画或效果。
• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

注：每次使用动画之前，先调用 stop() ,再调用动画。