使用JQuery的Flash动画横幅

Question

我正在尝试为页面顶部创建一个横幅，但还没有找到任何能够结合我所需要的所有代码。我已经列举了我正在尝试做的事情。

A）我有4个按钮（每个都是一个图像文件），中间有两个默认图像。这是主要/非活动状态。

所有按钮在悬停时都会有类似的动画。为了这个问题，我只说明了两个按钮。

B）如果将鼠标悬停在Box 1（左上角）上，按钮将会改变，文本和线条将从左向右滑动。此外，中心图像会改变。而且，为了使事情更具挑战性，左侧按钮和中心图像将链接到第1页。当您离开时，文本向左滑动，图像返回到A中的默认状态。蓝色框表现为同样的方式，链接到第2页。

C）以类似的方式，如果将鼠标悬停在Box 4（右下角）上，按钮将会改变，文本和线条将从右向左滑动。此外，中心图像会改变。右侧按钮和中央图像将链接到第4页。当您离开时，文本向右滑动，图像返回到A中的默认状态。绿色框的行为方式相同，链接到第3页。

我发现的最接近的是：jQuery image slide on hover effect (horizontal)我在想如果我使用所有（A）的静态图像作为背景图像，也许我可以创建一个透明的精灵，只有活动版本悬停按钮和中心图像，在悬停时向左或向右滑动。

我可以看到上面的例子如何对Boxes 1和3（左上角和右上角）起作用，并且当图像向左或向右滑动时，给出幻觉线条滑出，但我不确定它是怎么回事适用于方框2和方案4。

我是在正确的轨道上，还是我要求的方式超过JQuery的可能性？我可以放弃动画文本（我可以让它们成为悬停图像的一部分），但按钮和中心图像需要在悬停时更改，并且需要链接到页面。

Answer 1

我在jQuery中创建了一个与Flash混淆的小部件。我认为您需要将窗口小部件的每个元素细分为不连续的部分。你正在制作一个新的小部件。没有方法可以做你想要的。您必须使用此处说明的.animate()方法。 http://api.jquery.com/animate/您将使用.animate()方法将一个CSS类动画为另一个CSS类。

这个页面有一个关于animate方法的很好的入门。 http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html

这就是我要做的事情：

• 我会制作您想要的页面的HTML。

• 我会创建你将拥有的每种风格的盒子的CSS。

• 我会在每个盒子上都有相同的CSS指令 动画。我发现如果所有CSS，animate方法更加令人满意 要计算的具有相同的参数但具有不同的参数 值。

• 我会在4个外框中使用全分辨率图像。

• 我会为包含图像的div设置动画，而不是图像本身。

• 我会让图片动态填充div，这样当我 改变了div的大小，图像将是一个噱头。

• 我会在firebug中测试不同的命令，看看如何 他们表现得很好这很关键。交互式JavaScript控制台 是你的朋友。

这是一项艰巨的任务......当你完成这件事时，你的帽子就会很棒！也许在那之后你可以把它变成一个jQuery插件供其他人使用！

Answer 2

我决定把这个弄得一塌糊涂，这是我到目前为止所掀起的。目前还没有链接，但是半小时我不觉得太糟糕了:)）

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