-
.animate( properties [, duration ] [, easing ] [, complete ] ) properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只能動畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。 除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏 .animate({ width: "toggle" });查看全部
-
.fadeTo( duration, opacity [, complete ] ) 必需的 duration參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數是該函數完成后所執行的函數名稱。 $("#btnFadeSwitch").click(function() { var v = $("#animation").val(); if (v == "1") { $("p").fadeTo("slow", 0.5); } else if (v == "2") { $("p").fadeTo(1000, 0.2); } else if (v == "3") { $("p").fadeTo(1000, 0.9, function() { alert('完成') }); } });查看全部
-
<p >緋雨</p>使用eq來獲得第一個p標簽的color值： $("p").eq(0).css("color") //因為eq(num)返回的是個jq對象，所以可以用jq的方法css使用get來獲得第一個p標簽的color值： $("p").get(0).style.color //因為get(num)返回的是個html對象，所以要使用傳統的HTML對象方法，jq對象此時就沒用了。當然，你也可以get(num)后把對象轉為jq的對象再進行操作： $($("p").get(0)).css("color")-------------------------------------------------------------------------- more eq see： http://api.jquery.com/eq/ -------------------------------------------------------------------------- more get： see： http://api.jquery.com/get/ eq:返回是一個 jquery對象 作用是 將匹配的元素集合縮減為一個元素。這個元素在匹配元素集合中的位置變為0，而集合長度變成1 get:是一個html 對象數組作用是取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。 <ul> <li>li-1</li> <li>li-2</li> </ul> 比如我們通過jquery選擇器 $("li")那么我們將會有兩個li元素我如何只想選擇其中一個呢? $("li:eq(0)").html() 或者 $("li").eq(0).html() 就是第一個li 這里我們將獲得 li-1 $("li:eq(1)").html() 或者 $("li").eq(1).html() 就是第二個li 這里我們將獲得 li-2 下面我們看看 get因為get返回是html對象所以我們這里 $("li").get(0).style.color='red' 只有這樣用或者將 get返回對象轉換成jquery對象在操作 $($("li").get(0)).css("color",'red')即可查看全部
-
jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的原因的就是jQuery的實例是一個元素合集查看全部
-
animate 需要注意一下~ 對于 options名值對中，step, progress 默認的參數需要理解。查看全部
-
除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏查看全部
-
.animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options ) .animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。 參數分解： properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。查看全部
-
因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
$("button:last").click(function() { $("#a2").slideDown(3000,function(){ alert('動畫執行結束') }) });查看全部
-
fadeOut淡出，fadeIn淡入，fadeToggle切換查看全部
-
.hide(fast / slow)這是一個動畫設置的快捷方式，'fast' 和 'slow' 分別代表200和600毫秒的延時，就是元素會執行200/600毫秒的動畫后在隱藏 <script type="text/javascript"> //點擊buttom2 執行動畫隱藏 $("button:last").click(function() { $("#a2").hide({ duration: 3000, complete: function() { alert('執行3000ms動畫完畢') } }) }); </script>查看全部
-
stop還有幾個可選的參數，簡單來說可以這3種情況 .stop(); 停止當前動畫，點擊在暫停處繼續開始 .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行 .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值查看全部
-
options參數 duration - 設置動畫執行的時間 easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數 step：規定每個動畫的每一步完成之后要執行的函數 progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念 complete：動畫完成回調查看全部
-
因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery動畫</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <style> #conten{width: 200px;height: 200px;background:pink;} .new{border: 3px solid yellow;} </style> <script> $(function(){ $('button').click(function(){ $('#conten').slideToggle('3000',function(){ $('#conten').addClass("new"); }); }) }) </script> </head> <body> <div id="conten">你看見了我的小熊了么</div> <button class="btn">快說</button> </body> </html>查看全部
舉報
0/150
提交
取消