使用JQuery的Flash看起來動畫橫幅

Question

我想爲頁面頂部創建一個橫幅，但還沒有找到任何代碼，它結合了我所需要的所有東西。我已經包含了一個我想要做的事情的例子。

A）我有4個按鈕（每一個圖像文件），兩個在中心任一側上的默認圖像。這是主/非活動狀態。

所有按鈕在懸停時都會有相似的動畫。爲了這個問題，我只說了兩個按鈕。 B）如果將鼠標懸停在方框1（左上角）上，按鈕將會改變，文字和線條會從左向右滑動。而且，中心圖像也會改變。而且，爲了使事情變得更具挑戰性，左側按鈕和中央圖像將鏈接到頁面1.當您離開時，文本向左滑動，圖像將返回到A中的默認狀態。藍色框將表現爲C）以類似的方式，如果您將鼠標懸停在方框4（右下角）上，按鈕將會改變，文本和線條會從右向左滑出。而且，中心圖像也會改變。右邊的按鈕和中心圖像將鏈接到第4頁。當您離開時，文本向右滑動，圖像將返回到A中的默認狀態。綠色框的行爲方式與第3頁相同。

我發現的最近的是這樣的：jQuery image slide on hover effect (horizontal)我在想，如果我把所有的靜態圖像（A）用作背景圖像，也許我可以創建一個透明的精靈，只有活動版本的懸停按鈕和中央圖像，在懸停時向左或向右滑動。

我可以看到上面的例子對於框1和3（左上和右上）是如何起作用的，並且當圖像向左或向右滑動時給出幻燈片，但我不知道如何它可以用於Box 2和4.

我在正確的軌道上，還是我要求的方式超過JQuery中的可能性？我可以放鬆動畫文本（我可以讓它們成爲懸停圖片的一部分），但按鈕和中心圖像需要在懸停時更改，並且需要鏈接到頁面。

Answer 1

我在jQuery中製作了一個與之前混淆的小部件。我認爲你需要將你的小部件的每個元素分解成不連續的部分。你正在製作一個新的部件。沒有辦法做你想做的事。你將不得不使用這裏解釋的.animate()方法。 您將使用.animate()方法將一個CSS類動畫到另一個CSS類。

此頁面在動畫方法上有很好的入門知識。 http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html

這裏是我會做：

• 我會讓你想要的網頁的HTML。

• 我會創建CSS的每種風格的盒子，你會有。

• 我會在每個盒子上都有相同的CSS指令，這些指令會有 動畫。如果要計算的所有CSS 具有相同的參數但具有不同的 值，我發現動畫方法更令人滿意。

• 我會使用4個外框中的全分辨率圖像。

• 我會動畫包含圖像的div，而不是圖像本身。

• 我會讓圖片動態填充div，以便當我改變div的大小時，圖片將成爲一個噱頭。

• 我會在螢火蟲測試不同的命令，看看他們的行爲如何 。這很關鍵。交互式javascript控制檯 是你的朋友。

這是一項艱鉅的任務......當你做這將是你的帽子一個漂亮的羽毛！也許在此之後，你可以把它變成一個jQuery插件供其他人使用！

Answer 2

我決定琢磨一下這一點，這是我迄今爲止鞭up的。沒有鏈接尚未，但一個半小時我並不感到太糟糕有關:)

http://jsfiddle.net/BH8s5/3/