jQuery效果

隐藏和显示

例子

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

speed是隐藏速度：slow/fast/毫秒值
callback隐藏或显示后执行的函数

$("button").click(function(){
  $("p").hide(1000);
});

toggle切换hive和show方法

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

淡入淡出

#fadeIn() 淡入隐藏的元素
$(selector).fadeIn(speed,callback);

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

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

#fadeTo()设置不透明度
$(selector).fadeTo(speed,opacity,callback);

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

滑动

只能向上收起？

//slideDown() 向下滑动元素
$(selector).slideDown(speed,callback);
//slideUp 向上收起
$(selector).slideUp(speed,callback);

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

动画

animate方法

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

params是CSS属性
callback是动画完成所执行的函数
例子把div元素向右移动250px

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

使用预定义的值

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

使用队列功能

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

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画

$(selector).stop(stopAll,goToEnd);

stopAll如果为true清除所有动画，默认false
goToEnd为true，立即停止，默认false

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

Callback

有callback会在动画执行完后调用

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

没有callback会直接调用

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

链

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