图片滑入页面html,jquery鼠标移入图片左滑动效果

在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);

})

})