2

我对 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>
4

2 回答 2

2

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

 $('#cont').animate({left:'+100px'}, 1000);
于 2013-03-30T04:35:25.333 回答
2

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

$(document).ready(function () {
    $("#left").click(function () {
        $("#cont").animate({
            left: '-=50'
        }, 'slow');
    });
    $("#right").click(function () {
        $('#cont').animate({
            left: '+=50'
        }, 'slow');
    });
});
于 2013-03-30T04:47:21.960 回答