jQuery动画不能正确滚动

时间:2015-09-13 12:36:04

标签: javascript php jquery html html5

我有一个大容器元素来容纳较小的容器元素及其内容。我有我的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">&lt;</div>
                        <div id="right-featured">&gt;</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>

0 个答案:

没有答案