Question

我对jQuery很新，所以这可能是一个愚蠢的问题。我想手动（不动画）左右移动div。具体来说，我希望能够单击一个左按钮，它向左移动100px，或单击一个右按钮，它向右移动100px。我确定我错过了一些明显的东西（可能是多个明显的东西），但我已经做了很多检查，而且我找不到任何有用的东西。我使用下面基本上自包含的代码作为测试。 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>

Answer 1

我认为你应该接受动画功能的帮助，比如这个

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

Answer 2

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

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

使用jQuery scrollleft滑动div

2 个答案: