3.3_自訂特效速度
介紹特效速度的預設參數及自訂速度參數

介紹特效速度的預設參數及自訂速度參數


hide()

目標:點選<h2>時,將隱藏的<div>顯現出來

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.00.22.93.jpg

使用hide()隱藏<div>

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.00.37.43.jpg

運行結果,<div>成功隱藏

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.00.39.53.jpg

預設速度參數

<h1>被點選時,運用next(),來找到它的下一個tag,並用slideDown()的透效顯示出來

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.10.77.jpg

運行結果,點選<h1>,<div>成功淡出

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.15.00.jpg

要改變動畫速度為2秒(2000)

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.26.77.jpg

運行結果,點選<h1>,<div>成功花2秒淡出

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.31.33.jpg

slow'等於輸入600

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.41.50.jpg

falst'等於輸入200

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.01.50.50.jpg

觀察jQuery的函式庫,動畫參數的速度slow, fast是如何設定的

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.02.10.30.jpg

測式預設的動畫速度為多少

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.02.29.43.jpg

運行結果,在console中檢測,動畫速度參數為_dafault:400,fast:200,slow:600

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.02.35.77.jpg

填入參數字串,_default為預設速度

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.02.50.37.jpg

如果亂填的話,便是照預設速度

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.03.09.77.jpg

自訂速度參數

改變預設速度參數為2000

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.03.44.77.jpg

運行結果,2秒內<div>淡出效果

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.04.01.17.jpg

沒有填速度,便用預設速度

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.04.14.77.jpg

自訂龜速速度參數-tortoise為5000

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.04.50.27.jpg

運行結果,5秒內<div>淡出效果

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.04.54.77.jpg

查詢API中的速度參數

有參數不懂時,請直接看jQuery函式庫,如想了解fast參數的意義,直接搜尋fast

/images/coding-note/javascript/jQuery-30day/10.Modifying-Effect-Speeds/10.Modifying-Effect-Speeds-0.05.21.27.jpg