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

我想知道是否有可能创建一个带有可链接图像的Jquery动画。我环顾四周，但到目前为止，我还没有找到这样的运气，我可以摆弄的编码，以获得我想要的效果，或一个插件

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

为了更具体地描述我试图实现的动画，我想对其进行动画处理，使其看起来像是将鼠标悬停在选项卡上时正在“拉出”选项卡，而其他选项卡保持静止。然后，当您移动光标时，它下面的选项卡（或另一个选项卡），拉出的选项卡将移回“原始大小”，新选项卡将像第一个一样拉出。我真的很想让动画在新选项卡拉出时将原始选项卡移回，但我只喜欢选项卡拉出动画，而原始选项卡只是“捕捉”回其原始状态。我知道有只用于图像交换的编码和函数，但我仍然找不到任何函数、编码或插件来制作这种可以单击/链接图像的动画

任何事情，即使是“这种事情是不可行的”都会得到赞赏。我想知道它是否可能，我将如何实现它，它是否是插件可以做到的，功能，编码，类似的教程，或其他形式的网站编码/编程可以实现这一点。再说一次，如果图像不可行，我可以用块链接来实现

---

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

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

这是很容易做到的

HTML 这假设选项卡最右侧的20px是始终显示的位

jQuery 每当我需要使用jQuery的

hover（）

时，我都会使用。如果用户只是随意地将光标移动到元素上，此插件可防止触发悬停和退出事件

---

还要记住，触摸设备没有悬停事件。你需要确保它们正常工作。

@alex，你怎么能写得这么快，…嗯，无论如何，我也开始使用hoveaIntent来提供延迟和所有好处。@gov猜测我已经记住了API:）@alex，继续摇摆，像这样分享知识，我在短时间内从这个网站学到了很多。@alex快速提问，为什么我们需要这个，先停下来animatinng@gov因此，上一个动画可以停止。

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

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

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

$(function() {

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

});