这个动画是怎么做的？ [关闭]答案

【问题标题】：How is this animation done? [closed]这个动画是怎么做的？ [关闭]
【发布时间】：2012-07-24 21:22:09
【问题描述】：

我喜欢this little animation 的显示方式

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

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

感谢您的帮助。

【问题讨论】：

标签： jquery html css

【解决方案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 以便一次只显示其中一个图像。

Here is an Example 同时包含 JS 和 CSS 版本。

【讨论】：

css3 过渡在 ie 中不起作用
虽然这偶尔会起作用，但 OP 更适合使用 Javascript 来确保进一步的跨浏览器兼容性，直到 CSS 转换兼容的浏览器开始占据大部分市场份额。
添加了一个 javascript 解决方案。但是，我更喜欢纯 CSS 解决方案，因为这些转换具有优雅的降级。
如果您使用的是 jQuery；您需要带有 html 标记的掩码图像使用溢出：隐藏，并且您需要定义 css 位置：相对或绝对。当前答案的 jQuery 部分不适用于此 css。
屏蔽方法示例：stackoverflow.com/questions/11627531/…

【解决方案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

【讨论】：

【解决方案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文件中

【讨论】：

感谢您的帮助。