<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.div1{
position:relative;
width:300px;
height:46px;
margin:20px auto;
border:1px solid red;
overflow:hidden;
}
.div1 a{height:46px;}
.div1 a i{position:absolute;right:0;display:inline-block;width:46px;height:46px;background:green;z-index:100}
.div1 a span{/*transition:all 2s;*/height:46px;position:absolute;right:-16px;background:green;z-index:10;border-top-left-radius:5px;border-bottom-left-radius:5px;}
</style>
</head>
<body>
<div class="div1">
<a href="javascript:void(0);">
<i class="div_img">666</i>
<span class="c">回到顶部</span>
</a>
</div>
</body>
<script src="js/jquery-1.9.0.js"></script>
<script>
var timer;
$(".div1").find("a").hover(function(){
clearTimeout(timer);
timer=window.setTimeout(function(){$(".c").animate({"right":"46px"});},300)
},function(){
clearTimeout(timer);
$(".c").animate({"right":"-16px"});
});
</script>
</html>
