緩動函數指定動畫效果在執行時的速度，使其看起來更加真實。
現實物體照著一定節奏移動，並不是一開始就移動很快的。當我們打開抽屜時，首先會讓它加速，然後慢下來。當某個東西往下掉時，首先是越掉越快，撞到地上後回彈，最終才又碰觸地板。
本頁可以在每次你需要時，幫助你找到想要的緩動函數。
http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。
緩動函數(easings)速查表
回應
Category Archives: jquery
jsonp 測試頁面 前端 html 及後端 php 範例
HTML:
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE"
CONTENT="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script type='text/javascript'>
function show_msg(msg){
alert(msg);
}
$(function(){
$.ajax({
type:'get',
async:false,
crossDamain:true,
cache:false,
url:'http://carbonfootprint.toyoink-ct.com.tw/carbonfootprint/login_valid',
dataType:'jsonp',
jsonCallback:'show_msg',
data:{account:'jerry',passwd:'justdoit'}
});
});
</script>
</head>
<body>
</body>
</html>
PHP:
public function login_valid(){
$account=$this->input->get('account');
$passwd=$this->input->get('passwd');
$query=$this->db->query("select * from carbon_passwd where id='{$account}' and passwd='{$passwd}';");
if($query->num_rows()>0){
$this->session->set_userdata($query->row(1));
//print_r($this->session->all_userdata());
echo "show_msg('密碼對了^^');";
}
else{
echo "show_msg('你打的帳號:{$account},密碼:{$passwd}不對喔！！');";
}
}
jQuery 在 each 中使用 break、continue 控制迴圈
範例說明：
$.each(data, function(index, obj){
if (index == 1) {
return; // 等於continue
} else {
return false; // 等於break
}
});
jquery 使用 on api 讓新元素可用先前定義的事件方法
A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( “#dataTable tbody" ).on( “click", “tr", function() {
alert( $( this ).text() );
});
在 #dataTable tbody 元素下的 tr 元素，傳來的click事件都將會顯示以 tr 內容的訊息。
重點在 bubble up ，像上述範例一樣：tbody 一直都存在，只有它底下的tr可能會移除或新增。所以把tbody做個on的method，針對它下面指定元素與指定事件。對符合條件所傳來的氣泡事件，執行設定好的事件方法。
jquery plugin 在 input 內顯示輸入說明文字 範例
# jQuery Plugin Code
$.fn.description_inside_input_field = function(){
return this.each(function(){
$(this).val($(this).prop('title'));
$(this).focus(function(){
if($(this).val()==$(this).prop('title')){
$(this).val('');
}
}).focusout(function(){
if($(this).val()==''){
$(this).val($(this).prop('title'));
}
});
});
}
# Document Ready
$("tr.add_row input[type='text']").description_inside_input_field();
# Html Code
<table id="table_add_data"> <tbody> <tr class="add_row"> <td><input class="year" title="年度" type="text" value="" /></td> <td><input class="electric" title="電力" type="text" value="" /></td> <td><input class="derv" title="柴油" type="text" value="" /></td> <td><input class="natural_gas" title="天然氣" type="text" value="" /></td> <td><input class="gas" title="汽油" type="text" value="" /></td> <td><input class="lpg" title="液化石油氣" type="text" value="" /></td> <td><input class="tap_water" title="自來水" type="text" value="" /></td> <td><input class="add_button" type="button" value="新增" /><input class="cancel_button" type="button" value="取消 " /><input class="submit" type="button" value="送出" /></td> </tr> </tbody> </table>
Scrollable Timeline 拖拉像 plurk 時間軸 的 jquery 程式範例
來源：http://jqueryfordesigners.com/fun-with-overflows/
// when the DOM is ready...
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
// attach 3 pieces of data to the #timeline element
$(this)
.data('down', true) // a flag indicating the mouse is down
.data('x', event.clientX) // the current mouse down X coord
.data('scrollLeft', this.scrollLeft); // the current scroll position
// return false to avoid selecting text and dragging links within the scroll window
return false;
}).mouseup(function (event) {
// on mouse up, cancel the 'down' flag
$(this).data('down', false);
}).mousemove(function (event) {
// if the mouse is down - start the drag effect
if ($(this).data('down') == true) {
// this.scrollLeft is the scrollbar caused by the overflowing content
// the new position is: original scroll position + original mouse down X - new X
// I'd like to see if anyone can give an example of how to speed up the scroll.
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mousewheel(function (event, delta) {
// now attaching the mouse wheel plugin and scroll by the 'delta' which is the
// movement of the wheel - so we multiple by an arbitrary number.
this.scrollLeft -= (delta * 30);
}).css({
'overflow' : 'hidden', // change to hidden for JS users
'cursor' : '-moz-grab' // add the grab cursor
});
});
// finally, we want to handle the mouse going out of the browser window and
// it not triggering the mouse up event (because the mouse is still down)
// but it messes up the tracking of the mouse down
$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
// *try* to get the element the mouse left the window by and if
// we really did leave the window, then cancel the down flag
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}
} catch (e) {}
}
});
