当单击“右”按钮 jquery 时，如何使此 div 动画化以向左滑动？

debugcn 发表于 Dev

阿布N2286

每次在没有滚动条的情况下单击右侧按钮时，如何让最近的容器或 thmbnl-recent div 向左滑动以创建像 youtube 一样的滑动 div 效果。

$('button').onclick(function(){
   $('#thmbnl-recent').animate({left: "-=500"}, 2000);
});

 /*----------Recent Projects----------*/
    
    
    #recent-container {
    	width: 950px;
    	height: 275px;
    	background-color: ;
    	border: solid;
    	border-width: 1px;
    	border-color: #d8d8d8;
    	margin-bottom: 25px;
    	position: absolute;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	white-space: nowrap;
    
    }
    
    .thmbnl-recent {
    	padding: 20px 13px 0px 13px;
    	width: 190px;
    	display: inline-block;
    	border: solid;
    	border-width: 1px;
    	border-color: #d8d8d8;
    	background-color: white;
    	transition: background-color 0.3s ease;
    	cursor: pointer;
    
    }
    
    .thmbnl-recent h1 {
    	text-align: center;
    	font-family: "calibri light";
    	font-size: 24px;
    	margin: 0 auto;
    	padding: 10px 0px;
    	letter-spacing: 2px;
    }
    
    #recent-title {
    	font-family: "calibri light";
    	text-align: center;
    	width: 950px;
    	background-color: white;
    	margin: 0 auto;
    	padding: 10px 0px;
    	position: relative;
    	z-index: 2;
    	border-top: solid;
    	border-right: solid;
    	border-left: solid;
    	box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    	border-width: 1px;
    	border-color: #d8d8d8;
    }
    
    .thmbnl-recent:hover {
    	background-color: #e8e8e8;
    	transition: background-color 0.3s ease;
    }
    
    .thmbnl-recent:active {
    	background-color: #d1d1d1;
    }
    
    
    
    /*--------SLIDE IMAGE---------*/
    
    #gallery-container {
    	margin: 75px 0px 45px 0px;
    	text-align: center;
    	border: solid;
    	border-color: #d8d8d8;
    	border-width: 1.5px;
    }
    
    #slide-section {
    	text-align: center;
    	background-color: white;
    	padding: 20px 20px 0px 20px;
    
    }
    
    #gallery-container h1{
    	padding: 15px 0 15px 0;
    	margin: 0;
    	font-family: "calibri light";
    	font-size: 30px;
    	border-bottom: solid;
    	background-color: white;
    	border-color: #d8d8d8;
    	border-width: 1.5px;
    	box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    	z-index: 3;
    	position: relative;
    }
    
    #imgrow {
    	margin-top: 20px;
    	padding-bottom: 20px;
    	display: flex;
    	justify-content: space-between;
    
    }
    
    button{
    	margin-top: 280px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="recent-title">Recent Projects</h2>

<div id="recent">
	<div id="recent-container">
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
	</div>

	<button>right</button>

</div>

杰里米·蒂尔

这是我使用 jQuery 和 CSS3 动画的方法：

var $slider = $("#recent-container")

$("button").click( function() {
	$slider.css("left","-=195px")
})

h1{
   font-size : 0.8rem
}

#recent {
  border: #f00 dashed 2px;
  overflow: hidden;
  position: relative;
  width: 600px;
  height: 230px;
}
#recent #recent-container {
  position: absolute;
  white-space: nowrap;
  left: 0;
  -webkit-transition: all 2s ease-in-out;
  transition: all 1s ease-in-out;
}
#recent #recent-container .thmbnl-recent {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="recent-title">Recent Projects</h2>

<div id="recent">
	<div id="recent-container">
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
	</div>
</div>
<button>right</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。