我有一个大容器元素来容纳较小的容器元素及其内容。我有我的jQuery滚动按钮单击,但它不工作,我不知道为什么它不滚动我有和警报在那里,以确保它工作,这工作正常。这是我在之前的项目中使用的相同代码,并且工作正常我无法看到我在这个代码中出错的地方。 这是jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).on('click', '#left-featured', function(event){
$('#travel-item-container').animate({"scrollLeft": '+=-600px'}, 1000);
});
$(document).on('click', '#right-featured', function(event){
$('#travel-item-container').animate({"scrollLeft": '+=+600px'}, 1000);
});
</script>
这是容器及其元素:
<div class="travel-container">
<div id="left-featured"><</div>
<div id="right-featured">></div>
<div id="travel-item-container">
<div class="travel-item">
<img class="travel-picture" src="Images/golf-course.jpg"/>
<p class="travel-type">Golfing</p>
<p class="travel-cost">$300</p>
<p class="travel-title">Greensburg, IN</p>
</div>
<div class="travel-item">
<img class="travel-picture" src="Images/golf-course.jpg"/>
<p class="travel-type">Golfing</p>
<p class="travel-cost">$300</p>
<p class="travel-title">Greensburg, IN</p>
</div>
<div class="travel-item">
<img class="travel-picture" src="Images/golf-course.jpg"/>
<p class="travel-type">Golfing</p>
<p class="travel-cost">$300</p>
<p class="travel-title">Greensburg, IN</p>
</div>
</div>
</div>