html

<div class="main">
    	<div class="kuang">
	    	<div class="maint">
	    		<div class="mitem"></div>
		    	<div class="mitem"></div>
		    	<div class="mitem"></div>
		    	<div class="mitem"></div>
		    	<div class="mitem"></div>
		    	<div class="mitem"></div>
	    	</div>
    	</div>
    </div>

css

*{margin: 0;padding: 0;}
body,
html{
	width: 100%;height: 100%;
}
html { overflow-x: hidden; overflow-y: auto; }
.main {
	height: 500px;
	background: deepskyblue;
	display: flex;
    align-items: center;
}
.main .kuang{
	width:2400px;
	height: 250px;
	padding-top: 25px;
	box-sizing: border-box;
	background: lightgreen;
	overflow: hidden;
}
.main .kuang .maint{
	width:2400px;
    position: absolute;
}
.main .kuang .maint .mitem{
	width:350px;
	height:200px;
	margin-left: 50px;
	float: left;
	border:1px solid #fff;
	box-sizing: border-box;
	border-radius: 10px;
	background:rgba(255,255,255,0.3);
}

JQ

$('.maint').mouseover(function(){
        	$(this).animate({left:"-1000px"},5000,'linear');
        })