jQuery定时链接动画 - 在幻灯片放映时间

我的问题是这样的：我有一个jQuery幻灯片淡入/淡出图像列表。我需要的是，如果可能的话，在幻灯片放映的同时，还有一组链接，随着他们描述的图像的淡入，它们会随着时间的推移而略微增大或缩小。jQuery定时链接动画 - 在幻灯片放映时间

I.e.有4个图像在循环中，4个与图像相关的左侧链接，我希望与当前图像对应的链接以某种方式突出显示（增长，缩放等）。在动画文本'onmouseover/onmousehover'中发现了大量文档，但我最想做的是让动画与相关图像同步。我意识到这在Flash中会容易得多，但对于搜索引擎优化和可用性的原因，我需要链接为真实文本或者至少带有文本缩进的精灵图像（如果这样可以解决这个问题，cufon也可以）

下面是一个链接到一个非常基本的横幅设计（善良），幻灯片的作品，但链接目前只是一个静态图像。希望通过描述和这个例子，你将能够充分理解我试图达到的效果。

Link to example

很多感谢您的帮助。

编辑：我知道你可以使用jQuery'注入'到CSS值，所以我认为链接的font-size属性可以增加和减少，这个动作可以用jQuery动画。我只是不确定如何应用这一套行为。我是一个jQuery新手。

来源

2011-03-07 tcnarss

你有没有想用文本实现的例子？移动时，你想增加链接的大小？ – AlanFoster

我希望链接大小增加/然后再次出来，因为它对应的照片淡入。即图像交换的间隔是5000毫秒，所以当烟囱衬里图像显示我希望烟囱衬里链接基本上成长和返回到原始大小，从而向用户指示当前图像涉及什么。这是一个flash横幅版本[flash示例]（http://d-syne.com/rotator/home.swf）等待链接从左边进入，第二个循环显示放大/缩小效果我试图实现 – tcnarss

使用jquery的animate()修改链接的样式。例如：

$("#link1").animate({ 
    color:red, opacity: .5 
}, 1000, "linear", function(){ alert("all done"); });

来源

2011-03-07 15:37:08 tiagoboldt

@tiagoboldt感谢评论，所以如果我想动画缩放效果它会像这样：'$（“＃link1”）.animate（{font-size：120％}，2000 ）;”所以为了让它直接减少，我会直接在'$（“＃link1”）.animate（{font-size：100％}，2000）之后做相反的处理;''并为每个链接重复这个过程，增加间隔时间？还有一个问题，由于每个单独元素（链接和图像旋转器）的加载时间，这可能会与旋转图像不同步吗？谢谢 – tcnarss

使用方法是正确的:)在同步部分，也许，只有当您还调用图像的旋转（或者只要您希望它发生）时，也可以调用animate（）。不要相信时间间隔，因为他们不可靠（事件可能会在稍微不同的时间开始）。 ---如果答案有帮助，请将答案标记为有效，以便它可以帮助那些提出同样问题的答案。祝你好运 – tiagoboldt

@tiagoboldt这是有帮助的，我理解的解释.animate方法应该是旋转函数的一部分，以防止同步问题，但作为一个完整的jQuery noob，我真的很感激它，如果你可以检查[此代码]（ http://d-syne.com/rotator/topcon.js）从我的示例中的横幅中简要解释如何放置.animate方法。 Theres没有针对每张图片的具体规则，因此目前还不清楚我将如何将此方法与每个旋转事件绑定在一起，我几乎就在那里，并且如果您可以提供更多帮助，肯定会标记答案！经过一番修补和猜测之后再次感谢 – tcnarss

jQuery定时链接动画 - 在幻灯片放映时间

回答

相关问题