Question

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

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

为了更具体地说明我想要实现的动画，我想要设置它的动画，这样当你将鼠标悬停在它上面时，好像你正在“拉”标签，而其他标签保持静止。然后，当您将光标移动到它下面的标签（或另一个标签）时，拉出的标签将移回到它的“原始大小”，新标签会像第一个标签一样拉出。我真的很想让动画片在新标签拉出时将原始标签移回原位，但是我很好，只有标签拉出动画，而原始标签只是“捕捉”回到它的原始状态。我知道有图像交换的编码和功能，但我再也找不到任何函数，编码或插件来做这种可点击/链接图像的动画。

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

我对HTML和CSS很满意，但Jquery是一个我还在学习的新领域。

Answer 1

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

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

Answer 2

这很容易实现。

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()。如果用户只是随意地将光标移动到元素上，则此插件可防止触发悬停事件和触发事件。

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

可以与Jquery链接的移动图像动画？

2 个答案:

HTML

CSS

的jQuery