jquery中我們最需要用的除了異步,就是動畫和特效了吧,要想給用戶更好的體驗jquery是最好的選擇,就讓我們一起來看看jquery的動畫、特效的詳解吧!
1.顯示和隱藏hide()和show()
#對動畫來說,顯示和隱藏是最基本的效果之一,本節簡單介紹jQuery的顯示與隱藏。
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(); //隐藏 }); $("input:last").click(function() { $("p").show(); //显示 }); }); </script> <input type="button" value="Hide"> <input type="button" value="Show"> <p>点击按钮,看看效果</p> <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em> </div>
以上是hide()和show()函數的測試。
2.使用show()、hide()和toggle()方法
上一個範例對show()和hide()方法做了簡單介紹,其實這兩個方法可以接受參數控制顯隱藏過程。
語法如下
show(duration,[callback]); hide(duration,[callback]);
其中,duration表示動畫執行時間的長短,可以表示速度的字串,包括slow,normal,fast.也可以是表示時間的整數(毫秒)。 callback是可選的回呼函數。在動畫完成之後執行。
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(300); //隐藏 }); $("input:last").click(function() { $("p").show(500); //显示 }); }); </script>
範例和第一個例子相同,只是對hide()和show()增加了時間參數。其實toogle()也可以加入事件參數。
3.使用fadeIn()和fadeOut()方式
#對於動畫效果顯隱,jQuery也提供了fadeIn( )個fadeOut這兩個實用的方法,他們的動畫效果類似褪色,語法與slow()和hide()完全相同。
fadeIn(duration, [callback]); fadeOut(duration, [callback]);
範例
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(3000); //逐渐fadeOut }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); //逐渐fadeIn }); }); </script> <img src="/uploads/allimg/150204/225Q14038-0.jpg"> <input type="button" value="Hide"> <input type="button" value="Show">
#fadeTo()方法的使用。
fadeTo() 方法將被選取元素的不透明度逐漸改變為指定的值。
範例:
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(1000); }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); }); $("input:eq(2)").click(function() { $("img").fadeTo(1000, 0.5); }); $("input:eq(3)").click(function() { $("img").fadeTo(1000, 0); }); }); </script> <p><img src="03.jpg"></p> <input type="button" value="FadeOut"> <input type="button" value="FadeIn"> <input type="button" value="FadeTo 0.5"> <input type="button" value="FadeTo 0">
fadeOut相關參數
speed
可選。規定元素從目前透明度到指定透明度的速度。
可能的值:
毫秒 (例如 1500)
"slow"
"normal"
"fast"
opacity 必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。
callback
可選。 fadeTo 函數執行完之後,要執行的函數。
如需學習更多關於 callback 的內容,請造訪我們的 jQuery Callback 這一章。
除非設定了 speed 參數,否則不能設定該參數。
4.幻燈片slideUp和slideDown效果
#<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("div").add("img").slideUp(1000); }); $("input:eq(1)").click(function() { $("div").add("img").slideDown(1000); }); $("input:eq(2)").click(function() { $("div").add("img").hide(1000); }); $("input:eq(3)").click(function() { $("div").add("img").show(1000); }); }); </script> <input type="button" value="SlideUp"> <input type="button" value="SlideDown"> <input type="button" value="Hide"> <input type="button" value="Show"><br> <div></div><img src="04.jpg">
前面提到了幾種動畫效果,jQuery也提供了slideUp()和slideDown()來模擬PPT中的類似幻燈片拉簾效果,它與slow()和hide()完全相同。
以上程式碼定義了一個div和一個img,用add方法組合在一起。
5.自訂動畫
考慮到框架的通用性及程式碼檔案的大小,jQuery不能涵蓋所有的動畫效果,但它提供了animate()方法,能夠使開發者自訂動畫。本節主要透過介紹animate()方法的兩種形式及應用。
animate()方法給開發者很大的空間。它一共有兩種形式。第一種形式比較常用。用法如下
animate(params,[duration],[easing],[callback])
其中params為希望進行變幻的css屬性列表,以及希望變化到的最終值,duration為可選項,與show()/hide()的參數意義完全相同。 easing為可選參數,通常供動畫插件使用。 用來控制節奏的變化過程。 jQuery中只提供了linear和swing兩個值.callback為可選的回呼函數。在動畫完成後觸發。
需要注意。 params中的變數遵循camel命名方式。例如paddingLeft不能寫成padding-left.另外,params只能是css中用數值表示的屬性。例如width.top.opacity等
像backgroundColor這樣的屬性不被animate支援。
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; } </style> <script type="text/javascript"> $(function() { $("button").click(function() { $("#block").animate({ opacity: "0.5", width: "80%", height: "100px", borderWidth: "5px", fontSize: "30px", marginTop: "40px", marginLeft: "20px" }, 2000); }); }); </script> <button id="go">Go>></button> <div id="block">动画!</div>
在params中,jQuery也可以用「+=」或"-="來表示相對變化。如
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; position: absolute; } </style> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <button >Go>></button> <button >Go>></button> <div id="block">动画!</div>
先將div進行絕對定位,然後使用animate()中的-=和+=分別實現相對左移和相對右移。
animate()方法還有另一種形式,如下所示:
animate(params,options)
其中,params與第一種形式完全相同,options為動畫可選參數列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback與第一種形式完全一樣,queue為布林值,表示當有多個animate()組成jQuery時,當前animate( )緊接著這下一個animate(),是依序執行(true)還是同時觸發false
如下例子,展示了animate()第二種用法。
<style> div { background-color: #FFFF22; width: 100px; text-align: center; border: 2px solid #000000; margin: 3px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; } input { border: 1px solid #000033; } </style> <script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { //第一个animate与第二个animate同时执行,然后再执行第三个 $("#block1").animate({ width: "90%" }, { queue: false, duration: 1500 }) .animate({ fontSize: "24px" }, 1000) .animate({ borderRightWidth: "20px" }, 1000); }); $("input:eq(1)").click(function() { //依次执行三个animate $("#block2").animate({ width: "90%" }, 1500) .animate({ fontSize: "24px" }, 1000) .animate({ borderRightWidth: "20px" }, 1000); }); $("input:eq(2)").click(function() { $("input:eq(0)").click(); $("input:eq(1)").click(); }); $("input:eq(3)").click(function() { //恢复默认设置 $("div").css({ width: "", fontSize: "", borderWidth: "" }); }); }); </script> <input type="button" id="go1" value="Block1动画"> <input type="button" id="go2" value="Block2动画"> <input type="button" id="go3" value="同时动画"> <input type="button" id="go4" value="重置"> <div id="block1">Block1</div> <div id="block2">Block2</div>
以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。可以通过重置反复测试,熟悉animate()第二种形式。
以上就是本文的全部内容了,希望大家能够喜欢。
相关推荐:
以上是jQuery動畫與特效詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!