Jquery從入門到放棄（二）

 

jquery效果

前邊講到jquery能實現隱藏、顯示、切換，滑動，淡入淡出，以及動畫，原來平時呆板的頁面也能夠由開發者輕輕鬆鬆地給它注入活力。

 

1.    隱藏和顯示   hide()和show()以及toggle()

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

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

詳細的語法再這裏：

$(selector).hide(speed,callback);  其中speed是速度，單位是毫秒，也能夠用slow和fast控制，callback是回調函數

toggle(): 用來切換     hide() 和 show() 方法

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>

同理 toggle()函數的參數也是  

toggle(speed,callback);

2.淡入和淡出

淡入fadeIn(speed,callback)淡出 fadeOut(speed,callback)  淡入淡出交替fadezToggle(speed,clallback)

重點看fadeTo函數：

$(selector).fadeTo(speed,opacity,callback);  //opactiy 不透明度，[0,1],從清晰到模糊

3.滑動效果

上滑 slideUp(speed,callback)下滑slideDown(speed,callback)   交替滑動slideToggle(speed,callback)

4動畫

1. animate（）用於建立自定義動畫，能夠操做元素

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

全部 HTML 元素的位置都是靜態的，而且沒法移動。如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。

當存在多個動畫請求的時候，能夠使用隊列功能

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

2.stop()方法   

stop(stopAll,goToEnd);  
stopall是布爾變量，默認false，意爲清除動畫隊列    goToEnd 參數規定是否當即完成當前動畫。默認是 false。

3方法鏈             將相同元素上運行的多條的jquery命令鏈接在一塊兒

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