jquery - 使图像从一点到另一点动画？ (附图)

Question

更准确地说，我创建了一个描述我的查询的图形:

基本上，我有一个圆形标志。当用户将鼠标悬停在它上面时，我希望弹出一个人脸的图像，或者更确切地说是通过一些动画向上移动。这是我可以用 css3 完成的事情吗？还是有其他方法？

Answer 1

这在 jquery 中是可能的，但是您必须为圆圈使用矩形图像(即中间有孔的正方形)。它的结构有点像这样:

<div id="logoContainer" style="position:relative; overflow:hidden">
  <img src="Box_With_Hole.png" style="position:absolute; left:0px; top:0px;">
  <img src="Man_With_Shiny_Head.png" style="position:absolute; left:0px; top:100%;">
</div>

要转换你可以使用 JQuery

$("#logoContainer").hover(function(){$(this).stop().animate({
    top: "0%"
  }, 1000);
  $(this).stop().animate({
    top: "100%"
  }, 1000);
});

虽然未经测试

编辑:动画代码可能我粗略:P