jQuery -效果

1、jQuery hide() 和 show()

語法
$(selector).hide(speed,callback);

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

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

可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

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

2、jQuery Fading 方法

• fadeIn()
• fadeOut()
• fadeToggle()

• fadeTo()
  使用方法同1

  3、jQuery 滑動方法

• slideDown()
• slideUp()

• slideToggle()
  使用方法同1

  4、jQuery animate() 方法

  語法:
  $(selector).animate({params},speed,callback);
  可以操作多個屬性

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

使用佇列功能
如果您在彼此之後編寫多個 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");
});
 

5、jQuery stop() 方法

jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。

5、jQuery 方法連結

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