在PC端网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能性。
实现思路:1、给#tm鼠标加移入事件,鼠标移到#tm, .tu向左移动离左边只有10px 。快速来回滑动有一个动画(1000毫秒)还没结束再来回切换会有 动画叠加问题 解决方法 .stop()放在前面,可以在每次第二回叠加之前清处前一个。
2、给#tm鼠标移出事件 ,回到原来left: 100px;的位置上去。html>
#tm{
width: 400px;
height: 500px;
border: 2px solid darkblue;
margin: 50px auto;
position: relative;
}
#tm .tu{
width: 300px;
height: 400px;
border: 1px solid darkgreen;
position: absolute;
bottom: 0;
left: 100px;
}
$(function(){
//给#tm鼠标加移入事件
$('#tm').mouseenter(function(){
//鼠标移到#tm, .tu向左移动离左边只有10px
//$('#tm .tu').animate({'left':'10px'},1000);
//快速来回滑动有一个动画(1000毫秒)还没结束再来回切换会有 动画叠加问题 解决方法 .stop()放在前面,可以在每次第二回叠加之前清处前一个
$('#tm .tu').stop().animate({'left':'10px'},1000);
})
//给#tm鼠标移出事件
$('#tm').mouseleave(function(){
//回到原来left: 100px;的位置上去
$('#tm .tu').stop().animate({'left':'100px'},1000);
})
})