jquery - 如何得到显示和滚动与 JQuery 单击水平滚动编码？

Question

我正在尝试创建一个通过导航箭头将 div 滑入和滑出的页面。可以在这里看到一个不工作的演示：drawmeahouse.com（右边的 div 会滑动到中间，中间会滑动到右边的镜像，等等，当它们被添加时会有更多的 div最终...）

这是我已经走了多远，到目前为止失败了，drawmeahouse.com/index2.html

如您所见，内容没有显示在中间，导航箭头根本没有移动任何东西！我对 JQuery 很陌生，所以我试图破解这个，但我需要一些帮助。

Answer 1

需要在点击时为 div 设置动画......类似于：

$('.next').click(
     function(){
          $('.shadow').animate({ left: '-=600px' })
     }
)

这会将所有具有类的 div 移动shadow到左侧，从而有效地将 div 右侧带入主视图。id 使用不同的类之类的content东西，因为我确定你会shadow在其他元素上重用该类。

div 必须是绝对的才能为 left 属性设置动画。

或者您可以将它们全部放入一个容器中，容器绝对定位并移动整个容器，而不仅仅是 div

Answer 2

$(function(){
   $('#nextControl').click(function() {
      $('#mask').animate({
        marginLeft: "-=200px"
      }, "fast");
   });
    $('#prevControl').click(function() {
      $('#mask').animate({
        marginLeft: "+=200px"
      }, "fast");
   });
});

代码需要执行on render readyor on document ready，这是在更正一些其他语法错误后完成的。如果您想查看内容，请visibility: hidden;从容器的 CSS 中删除。