这个动画是如何完成的？

-2

我喜欢this little animation显示的方式这个动画是如何完成的？

在最左上角，当我们将鼠标悬停在徽标上时，显示Home文本。

这怎么可能？我检查了CSS并没有找到。

感谢您的帮助。

2012-07-24 Bronzato

这是做它的一段脚本：

function home_button(){ 
    $(".blue-arrow a") 
     .mouseenter(function(){ 
      if($("body").hasClass("homepage")!==true){ 
       $(".logo").stop().animate({top:-51},200); 
      } 
     }) 
     .mouseleave(function(){ 
      $(".logo").stop().animate({top:0},200); 
     }) 
     .mousedown(function(){ 
       $(".header-bar .light-area").css("backgroundColor","#005995"); 
     }) 
}

它发生在https://d3pvklq8xnxxh2.cloudfront.net/cache/js/base.0b56986.js文件

来源

2012-07-24 11:30:16 Joon

感谢你的帮助。 – Bronzato 2012-07-24 15:04:43

在它通过JavaScript实现的网站，但是这是没有必要的。

这是一个简单的过渡：

正常方式时

top:0;

和悬停风格

top:-51px;

与

transition: all 1s/*the time*/;

结合，这样的图片：

+-------+ 
| Gidsy | 
|  | 
| Home | 
+-------+

注意：转换在Internet Explorer 9或更低版本中不起作用。改进和简化的Javascript（jQuery的）是：

$(".blue-arrow a").hover(
    /* mouse-in */ 
    function(){ 
     $(".logo").stop().animate({top:-51},200); 
    }, 
    /* mouse-out */ 
    function(){ 
     $(".logo").stop().animate({top:0},200); 
    } 
);

为了使两个版本的正常工作，你需要一个包装元素，它有问题，你的形象和overflow:hidden如此高度的一半，这只能说明一个图像一次。

Here is an Example同时具有JS和CSS版本。

来源

2012-07-24 11:30:34 Christoph

css3转换在ie – donald123 2012-07-24 11:37:29

中不起作用虽然这会偶尔有效，但OP会更适合使用Javascript来确保进一步的跨浏览器兼容性，直到CSS转换兼容的浏览器开始占据大部分市场份额。 – Jeremy1026 2012-07-24 11:41:26

添加了javascript解决方案。不过，我更喜欢纯CSS解决方案，因为这些转换具有优雅的降级。如果您使用的是jQuery，则为 – Christoph 2012-07-24 11:42:56

它可以用纯CSS很容易做到：

<div class="logo"><a href="#">Text 1<br />Text 2</a></div>

.logo { 
    font-family: Arial; 
    color: #000; 
    font-size: 25px; 
    font-weight: bold; 
    height: 25px; 
    overflow: hidden; 
} 
a { 
    height: 25px; 
    color: #000; 
    display: inline-block; 
    -o-transition: margin 0.3s; 
    -moz-transition: margin 0.3s; 
    -webkit-transition: margin 0.3s; 
} 
.logo:hover a { 
    margin-top: -30px; 
}

现场演示：Tinkerbin

来源

2012-07-24 12:43:11

这个动画是如何完成的？

回答

相关问题