当右边的＆＃39;右边＆＃39;点击按钮jquery？

Question

如果没有滚动条创建像youtube一样的滑动div效果，每次点击右键时，如何让最近的容器或thmbnl-recent divs向左滑动abit。

＆＃13;

＆＃13;

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

＆＃13;

 /*----------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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

module.exports = async function(myUserId, sendUserId, money) {
  const transaction = await connection.transaction();
  try {
    const [myUser, sendUser] = await Promise.all([
      User.findById(myUserId, { transaction }),
      User.findById(sendUserId, { transaction })
    ]);
    await Promise.all([
      myUser.increment('balance', {
        by: money,
        transaction
      }),
      myUser.increment('balance', {
        by: -money,
        transaction
      })
    ]);
    await Transaction.create({...}, { transaction })
    await transaction.commit();
  } catch(e) {
    await transaction.rollback();
    throw e;
  }
}

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;
}