使用jQuery滑動div滑動

我對jQuery很新，所以這可能是一個不好的問題。我想要左右移動div，手動（而不是動畫）。具體來說，我希望能夠點擊一個左按鈕，並且它左移100px，或者點擊一個右按鈕，並且它向右移動100px。我確信我錯過了一些明顯的東西（可能是多個明顯的東西），但是我做了很多檢查，而且我一直無法找到任何有用的東西。我正在使用下面基本獨立的代碼作爲測試。 div只是不動。使用jQuery滑動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>

來源

2013-03-30 user2226161

好像你正在尋找'animate'功能http://api.jquery.com/animate/ – exexzian

您可以使用marginLeft。這是你在找什麼？ http://jsfiddle.net/8F9ay/ –

我同意使用動畫的。下面是一個小提琴一個鏈接，我開始創建你的代碼：link

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

來源

2013-03-30 04:47:21

這看起來不錯，我也很欣賞這個......但是看到我對上述答案的評論。我真的需要它立即彈出。希望仍然使用scrollLeft。如果這是不可能的，我可能會在這裏使用你的建議。但我希望即時與scrollLeft流行實際上是可能的。 – user2226161

即時彈出？你可以做到這一點。在我指定''slow''和@ankitsrist指定'1000'的地方，只需將該值更改爲'1' ...就像在一毫秒內 - 那麼它應該彈出。這裏是一個更新的[小提琴]（http://jsfiddle.net/t5R5H/5/） –

@DavidTansey我該如何阻止圖像/ div在左右窗外移動？目前，如果您持續按下'左'和'右'按鈕，圖像/ div將不在窗口中。我希望你明白我的意思。 –

我覺得你應該把動畫功能的幫助下，像這樣的

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

來源

2013-03-30 04:35:25

我很欣賞這個建議，但是當我說「不是動畫」時，我確實是這個意思。我知道這看起來很奇怪，但對於我試圖解決的應用程序，我真的希望div能夠立即彈出100px，而不是平滑地移動100px。我真的需要看看我是否可以使用scrollLeft來完成它。 – user2226161

使用jQuery滑動div滑動

回答

相關問題