jquery 動畫

jQuery 中得事件和動畫


首先，javascript 和html之間的交互是通過用戶和瀏覽器操作頁面時引發的事件來處理的
當文檔或者某個其他的你、某個元素髮生其他的變化或是操作時候，瀏覽器就會自動生成一個事件


簡單的綁定事件bind()


合成事件 jquery有兩個合成事件----hover()方法和toggle方法
hover方法用於模擬光標懸停的事件效果
語法的結構爲hover(enter,leave);
當鼠標移動上去時執行enter函數，當離開時執行第二個函數leave


jquery中得動畫效果，
常見的hide和show方法是最基本的動畫方法


用jquery做動畫效果要在標準模式下，否則可能會引起動畫的抖動標準模式也就是其包含如下dtd文件


與show方法不同的是fadeIn和fadeOut方法是改變元素的不透明度知道消失dadeIn正好相反。我們只想改變元素的不透明度
而不想改變高度就可以使用fadeOut方法


slideUp和slideDown方法自會改變元素的高度，當調用slideDown方法這個元素由上之下的延伸
知道其全部顯示而slideUp正好相反


jquery中任何動畫的效果都可以設置三中速度參數，分別爲slow  normal first


分別爲0.6 0.4 和0.2 如果用速度關鍵字就要加引號，如果是數值的話就不用加




自定義動畫的animate


前面講得三種方法，show和hide方法只改變元素的樣式屬性，而fadeIn和fadeOut只改變他的透明度而slideUp
和slideDown只改變元素的高度很多的情況下都沒法滿足我們的需求


那麼我們就需要運用些高級之定義的動畫效果來解決這些問題，就是animate


首先他的語法結構爲
animate (params,speed,callback)
三個參數的說明：params是一個包含樣式屬性值的映射{“style”,"value"}
speed是速度參數再就是callback是在完成動畫的時候執行的函數


在例子中要想吧隱藏改爲自己想要的css("border","5px solid blue")樣式的話
直接將fadeDown改爲css方法斌不能達到預期的效果，在剛開始動畫的時候css方法就被
執行了，這個爲問題的的原因在意css並不會被加入到動畫的隊列當中，而是立即執行
在這裏我們可以使用回調函數，對非動畫元素實現排隊吧css方法寫入最後的一個回調函數裏面就行了

改爲function（）{$(this).css("")}

<div class="dong" style=" width:100px; height:100px; background:#666; cursor:pointer; position:relative"></div>


 <script>
 $(function(){
$(".dong").css("opacity","0.5");
$(".dong").click(function(){
$(this).animate({"left":"200px","height":"300px","opacity":"1"},1000).animate({"left":"0px","height":"100px"},1000)
,function(){$(this).css({"background":"#03F","border":"solid 1px #ccc"})}

})
 
})
 
 </script>

callback回調函數適用jquery所有的動畫中


////停止動畫和判斷動畫是否處於動畫狀態stop方法


動畫的方法概括


首先是基本動畫方法，show hide 再就是漸變fadeIn和fadeOut
然後就是高度變化的slideDOwn和slideUp
最後到自定義動畫的animate 然後就是交互效的實現分別是fadeTo()改變透明度
toggle()用來代替show和hide 是一個交互方法 slideToggle()用來代替slideUp和slideDown改變交互時候的高度
animate可以代替所有的動畫
$("p").animate({"height":"show","width":"show","opacity":"show"},400);
等同於("p").show(400);


動畫隊列
當一個animate方法中運用多個屬性時候，動畫是同時發生的。當以鏈式的方式時是按照順序發生的
多種元素的動畫效果 默認的情況下動畫都是同時發生的
當回調的方法應用到動畫中時候，動畫是按照回調的循序發生的