jQuery 自訂動畫 Animate 基本範例

$(‘.v_b_img’).mouseover(function(e){
$(this).children(‘div’).stop().animate({
‘opacity’: 1,
‘top’: 0
},{
duration:400,
easing:’easeOutQuint’,
complete : function(){}
});
});

jQuery Animate Easing 速查表
http://easings.net/zh-tw[……]

Read more

jQuery animate easing 速查表

這是一個非常好用的工具,大部份的時候我們很難用文字來形容jQuery中動畫的Easing效果,下列這個網頁把所有Easing效果整理出來用波型圖片來讓大家一眼就了解動畫的效果,另外如果圖片看起來還不夠清楚,滑鼠滑過圖片上方會出現一個紅色鍵頭,即可看到動畫的動態效果。

[……]

Read more

CSS div height 無法 100% 問題

height的100%即為父層高度的100%,
但div在body之下仍然沒有辦法達到100%,
主要原因是HTML所有物件都會包在body之中,
大部份人都知道都會在CSS開頭初始body,如下:

body{
margin:0;
padding: 0;
width:100%;
height:100%;
}

但html常常都會忽略,body外面還有一層html,html一樣需要被初始,如下 :

html, body{
margin:0;
padding: 0;
width:100%;
height:100%;
}

如此,初始了最外層的html & body為100%,裡面的物件才有可能被CSS設置到完全的100%[……]

Read more

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html:

<a href="#">沒有作用</a>

jQuery

/**
*[......]

Read more

JQuery 1.9+ 之後 $.browser 無法使用(解決方法)

官網文件上指出 jQuery.browser 這物件在 jQuery 1.9 中被刪除,現在只能用 jQuery.migrate plugin. 才有辦法使用,如果我沒說錯的話 jQuery.migrate plugin. 就是新舊版本交替,可能會產生很多問題的一個過渡的工具,不然以前使用 jQuery.browser 判斷瀏覽器寫出來的plugin不就都死光光,我剛試了一下,加上jQuery.migrate plugin.就沒問題,沒加就掛點了。

這又回到一個很可怕的議題了,當網站大量使用第三方API或framework,當版本越來越亂的時候,開始不向下相容的時候,當初以此來開發的專案,就會變得非常難維護了,工程屍頭又要抱著燒了。

jQuery.migrate plugin.下載
http://jquery.com/download/

直接引用
<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script src=”http://code[……]

Read more