jQuery scrollLeft在单击时不工作

我有一个表单，用户可以使用“prev”和“next”按钮在表单中导航。 以下是我的代码和jQuery：

<div id="slideWrapParq">
    <div id="slide1">           
        <div class="parqInfo">Regular physical activity is fun and healthy, and increasingly more people are starting to become more active every day. Being more active is very safe for most people. However, some people should check with their doctor before they start becoming much more physically active. Completion of this questionnaire is a first step when planning to increase the amount of physical activity in your life.</div>
        <div class="parqWrapInner">
            <form action="/" method="post" id="parqForm">
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q1: </span>Has a Doctor / Medical Professional ever diagnosed you with a heart condition and indicated you should restrict your physical activity?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q1" value="yes">
                        <span>No</span><input type="radio" name="Q1" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q2: </span>When you perform physical activity, do you feel pain in your chest? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q2" value="yes">
                        <span>No</span><input type="radio" name="Q2" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q3: </span>When you were not engaging in physical activity, have you experienced chest pain in the past month? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q3" value="yes">
                        <span>No</span><input type="radio" name="Q3" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q4: </span>Do you ever faint or get dizzy and lose your balance? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q4" value="yes">
                        <span>No</span><input type="radio" name="Q4" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q5: </span>Do you have an injury or orthopaedic condition (such as a back, hip, or knee problem) that may worsen due to a change in your physical activity?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q5" value="yes">
                        <span>No</span><input type="radio" name="Q5" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q6: </span>Do you have high blood pressure or a heart condition in which a Doctor / Medical Professional is currently prescribing a medication?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q6" value="yes">
                        <span>No</span><input type="radio" name="Q6" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q7: </span>Are you pregnant? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q7" value="yes">
                        <span>No</span><input type="radio" name="Q7" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q8: </span>Do you have insulin dependent diabetes? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q8" value="yes">
                        <span>No</span><input type="radio" name="Q8" value="no">
                    </div>
                </div>
                #<div class="parqRow">
                    <div class="parqCell"><span class="red">Q9: </span>Are you 69 years of age or older and not used to being very active?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q9" value="yes">
                        <span>No</span><input type="radio" name="Q9" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q10: </span>Do you know of any other reason you should not exercise or increase your physical activity? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q10" value="yes">
                        <span>No</span><input type="radio" name="Q10" value="no">
                    </div>
                </div>
                            <input type="hidden" name="MEMBERGUID" id="MEMBERGUID" value="0399589c-66bd-e211-8911-00155d007722" />
            </form>
            <p class="point"><span class="red">* </span>If you honestly answered no to all questions you can be reasonably certain you can safely increase your level of physical activity gradually.</p>
            <p class="point"><span class="red">* </span>If your health changes so you then answer yes to any of the above questions, seek guidance from a Doctor.</p>
            <p class="point"><span class="red">* </span>If you health changes so that you then answer yes to any of the above questions, tell your Doctor / medical professional. Ask whether you should change your physical activity plan.</p>
        </div>
        <div class="slideButtons">
            <a href="/~fitspace/index.php/membership?view=memberForm1" class="signupFormPrev">Prev</a> 
            <a href="#" class="signupFormNext">Next</a> 
        </div>
    </div>
    <div id="slide2">
        sgfskgposgkporskgrspogk
    </div>
</div>

和CSS：

#parqWrapInner {
  min-height: 350px;
  overflow: hidden;
  width: 2310px;
}
#parqWrapper div#slide1, #parqWrapper div#slide2, #parqWrapper div#slide3 {
  display: block;
  float: left;
  height: 350px;
  position: relative;
  width: 770px;
}

幻灯片div在

#slideWrapParq

div中相邻放置，因此当单击按钮时，该div应滑动，以便将下一张幻灯片带入。由于某种原因，这是不工作，我一直在试图排序它在过去的几个小时！ 它绝对是正确的选择器，而且我已经在它上面测试了其他jQuery事件。 有人能看出我哪里出了问题吗

谢谢

我想应该是：

animate({scrollLeft: "+=770"}

---

在查看您的JSFIDLE之后，我注意到您没有将任何容器

溢出设置为滚动，这使我认为您对
滚动左
及其工作方式有误解

考虑到这个假设，我认为您很可能正在寻找一种无需滚动容器即可轻松实现的滑动效果。您的JSFIDLE非常混乱，因此我使用
scrollLeft
和
left
创建了一个非常简单的滑块示例：

左|
左（滑动状）|
我在CSS上做了一些注释，以帮助您更好地理解
scrollLeft
动画。
发布渲染的HTML。您的PHP在这里是不相关的。您有两个ID为
slideWrapParq
-jQuery不喜欢这样的元素。您好，您是对的，但不幸的是，我的问题中有一些糟糕的编辑。实际上这个ID只有一个实例，它仍然不起作用。为什么不在中创建一个简单的代码模拟呢？好的，我想知道我想要它做什么。嗨，塔克斯，请回答。这些不应该在那里，我只是在试验。如果没有“px”，它仍然不能工作。我明白了，这只是一个简单的猜测。
animate({scrollLeft: "+=770"}

$('.next').on("click", function (event) {
    event.preventDefault();
    $("#content").animate({
        scrollLeft: '+=600'
        }, 600);
});

$('.prev').on("click", function (event) {
    event.preventDefault();

    $("#content").animate({
        scrollLeft: '-=600'
        }, 600);
});

$('.next').on("click", function (event) {
    event.preventDefault();
    $("#contentWrapper").animate({
        left: '-=600'
        }, 600);
});

$('.prev').on("click", function (event) {
    event.preventDefault();

    $("#contentWrapper").animate({
        left: '+=600'
        }, 600);
});