jquery - 这个动画是怎么做的？

Question

我喜欢 这个小动画的显示方式

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

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

谢谢你的帮助。

Answer 1

在网站上它是通过 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因此它一次只显示一个图像。

这是一个包含 JS 和 CSS 版本的示例。

Answer 2

它可以很容易地用纯 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

Answer 3

这是执行此操作的脚本：

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文件中