使用jQuery完成小米官网图标

各位小伙伴们大家新年好呀！在此我祝愿各位在新的一年里顺风顺水，不脱头发早脱单。好了，废话不多说，因为之前写项目遇到过类似小米官网home图标那样的效果，最近发现对这块还有点遗忘了。所以咱们今天来通过jQuery简单的方式来还原这个效果。

小米官网顶部图标的样子，当我们鼠标放上去的时候显示图2的房子logo，鼠标滑出时显示MI的logo，当然您可以去小米官网再看一下这样的效果。我是使用jQuery的自定义动画来完成这样一个效果话不多说，我们开始吧

1. 第一步是先获取到这两张图片
2. 第二步我是将这两张图片放在了一个div里面

 <div class="logo">
     <a  href="#"><img id="mi" src="./img/logo1.png"></a> 
     <a  href="#"><img id="home" src="./img/logo2.png"></a>
 </div>

3. 第三步我们来设置它们的位置关系，及样式，这里我是使用了定位。

.logo{
    width: 55px;
    height: 55px;
    background-color:#ff6700;
    position: absolute;
    left:0px;
    top:24px;
    overflow: hidden;
}
.logo #mi{
    position: absolute;
    left:3px;
    top:4px;
}
.logo #home{
    position: absolute;
    left: -37px;
    top:2px;
}

4. 样式设好之后我们就可以来写js部分啦，这里我是用到了jQuery的自定义动画和事件切换的hover方法。有遗忘的伙伴可以查一下相关的内容。
   
5. 写js代码：

$(".logo").hover(function(){
        $("#mi").stop().animate({
            left:60
            },300)
            $("#home").stop().animate({
                left:0
            },300)
    },function(){
        $("#mi").stop().animate({
            left:0
            },300)
            $("#home").stop().animate({
                left:-50
            },300)
    })

6. 好了，各位伙伴可以试一下啦，jQuery完成这样的效果还是比较简单的。