在完成小demo的过程中，默默的发现小菜鸡的自己好像对JavaScript真的是不会运用，找了半天也没有成功把自己想要的效果显示出来。后来用了最简单的jQuery动画来完成效果：鼠标移动到图片上时，向右滑动展开显示完成图片；鼠标离开时，向左收起显示图标图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>图片的展开与收起</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.download {
margin-top: 25px;
}
.download a{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
}
.download img {
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-lg-1 col-xs-1"></div>
<div class="col-lg-5 col-xs-5">
<div class=" download">
<a class="and"><img src="images/download-android.png" alt="安卓下载"></a>
</div>
</div>
<div class="col-lg-5 col-xs-5 download">
<a class="ios"><img src="images/download-ios.png" alt="苹果下载"></a>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".download .and").mouseover (function () {
$(".download .and").animate({
width: '+=150px',
},"slow");
});
$(".download .and").mouseout( function () {
$(".download .and").animate({
width: '-=150px'
},"slow");
});
$(".download .ios").mouseover (function () {
$(".download .ios").animate({
width: '+=150px',
},"slow");
});
$(".download .ios").mouseout( function () {
$(".download .ios").animate({
width: '-=150px'
},"slow");
});
});
</script>