使用 jQuery scrollleft 滑动 div答案

【问题标题】：Sliding a div using jQuery scrollleft使用 jQuery scrollleft 滑动 div
【发布时间】：2013-03-20 19:46:52
【问题描述】：

我对 jQuery 还很陌生，所以这可能是一个愚蠢的问题。我想手动（非动画）左右移动一个 div。具体来说，我希望能够单击一个左按钮，它向左移动 100 像素，或者单击一个右按钮，它向右移动 100 像素。我确定我遗漏了一些明显的东西（可能是多个明显的东西），但我已经做了很多检查，但我找不到任何有帮助的东西。我使用下面基本独立的代码作为测试。 div 就是不动。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
      $(document).ready( function() {
        $("#left").click( function() {
          var pos = $("#cont").scrollLeft()-100;
          $("#cont").scrollLeft(pos);
        });
        $("#right").click( function() {
          var pos = $("#cont").scrollLeft()+100;
          $("#cont").scrollLeft(pos);
        });
      });
    </script>
    </head>
    <body>

    <div id="cont" style="position:relative; overflow:auto; width:400px; height:50px; border:10px solid #D6D6D6;"></div>
    <br />
    <input type="button" id="left" value="Left">&nbsp;&nbsp;<input type="button" id="right" value="Right">

    </body>
    </html>

【问题讨论】：

看来你在找animate函数api.jquery.com/animate
您可以使用marginLeft。这是你在找的吗？ jsfiddle.net/8F9ay

标签： jquery html button scroll click

【解决方案1】：

我认为你应该借助动画功能，像这样

 $('#cont').animate({left:'+100px'}, 1000);

【讨论】：

我很欣赏这个建议，但当我说“不是动画”时，我的意思是真的。我知道这看起来很奇怪，但是对于我要解决的应用程序，我真的希望 div 立即弹出 100px，而不是平滑地移动 100px。我真的需要看看我是否可以使用 scrollLeft 来做到这一点。
最后的1000是毫秒
所以你可以用零替换它。 scrollLeft 也一样。

【解决方案2】：

我同意使用 Animate。这是我从您的代码开始创建的小提琴的链接：link

$(document).ready(function () {
    $("#left").click(function () {
        $("#cont").animate({
            left: '-=50'
        }, 'slow');
    });
    $("#right").click(function () {
        $('#cont').animate({
            left: '+=50'
        }, 'slow');
    });
});

【讨论】：

这看起来很棒，我也很感激......但是请参阅我对上面答案的评论。我真的需要它立即弹出。希望仍然使用scrollLeft。如果那不可能，我可能会在这里使用您的建议。但我希望 scrollLeft 的即时弹出实际上是可能的。
即时流行音乐？你可以这样做。在我指定'slow' 和@ankitsrist 指定1000 的地方，只需将该值更改为1...在一毫秒内 - 然后它应该会弹出。这是更新的fiddle
@DavidTansey 如何阻止图像/div 移动到左右窗口之外？目前，如果您一直按“左”和“右”按钮，图像/div 会离开窗口。我希望你明白我的意思。