2012-11-01 42 views
1

我重新設計基於我們公司網站的設計中的另一個網站/ UI如何確定網站用於特定UI效果的內容?

的Web開發人員,負責網站,我應該是在假期後造型我重新設計的下一個星期,但我想要使用他的UI效果之一。

我似乎無法弄清楚他用於懸停淡變效果,這讓我覺得他沒有使用CSS3,而是一些jQuery庫。

編輯:我用螢火蟲試圖弄清楚他們在做什麼沒有成功。

Here是我正在看。它的淡入淡出效果用在右側欄中的幾個元素上。班級是fadehover

幫助診斷這個特定的問題是值得讚賞的,但我真的想知道我自己如何能夠在未來看到類似的問題。

+0

使用http://getfirebug.com/來查找。 – freebird

+0

我已經使用了幾年的螢火蟲,但我似乎無法弄清楚他們在做這件事。 – novicePrgrmr

回答

4

在main.js(線223),我發現這是負責的徘徊:

$("img.img-a").hover(
function() { 
    $(this).stop().animate({"opacity": "0"}, 400); 
}, 
function() { 
    $(this).stop().animate({"opacity": "1"}, 800); 
}); 

fadehover div的,也有與類img-aimg-b圖像。當光標懸停在img-a上時,它會淡出該圖像。所以我假設使用CSS將img-b放在img-a之後。

這是我做的:

我用谷歌Chrome,去了片resources和簡單的搜索(CTRL + F/CMD + F)爲fadehover類。不幸的是,我找不到任何東西,只是一些CSS和HTML,所以我選擇了這個div中的一個圖像類,其結果是賓果!

還有其他方法可以找出。如果您檢查該元素並用鼠標懸停,您可能會看到您的DOM正在改變。如果你的DOM改變,你知道它是由JavaScript完成的。無論是jQuery,原型還是其他框架都是另一回事。

如果DOM不更改,則可以確定使用了CSS轉換。除非使用Flash,SVG或HTML5 canvas元素;)

+0

非常好,但你是如何去找到的?你搜索什麼?你用了什麼?我非常擅長用螢火蟲計算CSS效果,但是當它的jQuery無法找出如何找到它的效果時。 – novicePrgrmr

+0

我只是編輯了我的帖子,描述了方法! –

+0

太棒了,非常感謝。你知道是否有辦法在firefox(firebug)中做同樣的事情嗎? – novicePrgrmr

相關問題