可与 Jquery 链接的运动图像动画？答案

【问题标题】：Moving image animation thats linkable with Jquery?可与 Jquery 链接的运动图像动画？
【发布时间】：2010-11-28 04:00:33
【问题描述】：

我想知道是否可以使用可链接的图像创建 Jquery 动画。我环顾四周，但到目前为止，我还没有找到可以修改编码以获得所需效果或插件的东西。

基本上我想要做的是在我目前正在设计的布局的左侧有“标签”，当您将鼠标悬停在它们上并链接到页面时，它会“拉出”。目前，我已将这些选项卡以图形方式设计为布局设计的一部分，但如果将代码块放置在布局边界的正确位置会更可行，我愿意这样做。

为了更具体地说明我想要实现的动画，我想对其进行动画处理，这样当您将鼠标悬停在标签上时，它看起来好像是在“拉”出标签，而其他标签则保持静止。然后，当您将光标移动到它下方的选项卡（或另一个选项卡）时，拉出的选项卡将移回其“原始大小”，并且新选项卡会像第一个选项卡一样拉出。我真的很想让动画在新标签拉出时将原始标签移回原处，但我只需要标签拉出动画就可以了，而原始标签只是“捕捉”回原来的状态。我知道有专门用于图像交换的编码和功能，但我还是找不到任何功能、编码或插件来执行这种可点击/可与图像链接的动画。

任何事情，即使是“这种事情不可行”都会受到赞赏。我正在寻找它是否可能以及我将如何实现它，无论是什么插件可以做到这一点，功能，编码，类似的教程，还是可以实现这一点的其他形式的网站编码/编程。同样，如果它不适用于图像，我会很好地使用块链接来做到这一点。

我对 HTML 和 CSS 非常熟悉，但 Jquery 是一个我仍在学习的新领域。

【问题讨论】：

标签： jquery image animation hyperlink

【解决方案1】：

这很容易做到。

HTML

<ul>
    <li><a href="/about">about</a></li>
    <li><a href="/contact">contact</a></li>
</ul>

CSS

ul {
   width: 300px;
   position: relative;
   overflow: hidden;
}

ul li {
   width: 300px;
   position: absolute;
   left: -280px;
   background: url(/images/li-background.png) no-repeat;
}

这假定标签最右侧的 20px 是始终显示的位。

jQuery

$(function() {

    $('ul li').hover(function() {
        $(this).stop().animate({ left: 0 }, 100);
    }, function() {
        $(this).stop().animate({ left: -280 }, 100);
    });

});

每当我需要使用 jQuery 的 hover() 时，我都会使用 hoverIntent()。如果用户只是随意将光标移到元素上，此插件可防止触发悬停事件。

另外请注意，触控设备没有悬停事件。您需要确保它们正常工作。

【讨论】：

@alex，你怎么能写得这么快，...嗯，无论如何我也开始使用 hoveaIntent 来延迟延迟和所有好处。
@gov 猜我已经记住了 API :)
@alex ，继续摇摆并像这样分享知识，我在短时间内从这个网站学到了很多东西。
@alex 快速提问，为什么我们在动画之前需要 this.stop
@gov 这样之前的动画就可以停止了。

【解决方案2】：

这里可以参考jQuery的动画api。它应该适合你想做的事情。

http://api.jquery.com/category/effects/

【讨论】：