如何使用jQuery在div / on页面上滑动div

我正在尝试创建一个函数,根据单击的按钮/链接在页面上滑动div。

基本结构:

   
Box #1
Box #2
Box #3

目前我正在使用

 $('.button').click(function() { $('.box').each(function() { 

但是当然只能作为一种循环,它只滑动第一个和最后一个div,我怎么能让每个按钮滑出然后在适当的div中。

我到目前为止的例子 : http : //jsfiddle.net/ykbgT/538/

如果您总是想要显示第n个框,其中n是您单击的链接的索引,请尝试以下操作:

 $('.button').click(function() { var index = $(this).index(".button"); var $box = $(".box:eq(" + index + ")"); $(".box").not($box).animate({ left: '150%' }, 500); if ($box.offset().left < 0) { $box.css("left", "150%"); } else if ($box.offset().left > $('#container').width()) { $box.animate({ left: '50%', }, 500); } }); 

更新示例: http //jsfiddle.net/andrewwhitaker/2uV2h/

最灵活的方法是向DIV标记添加自定义属性,该标记具有相应框ID的名称。 例如:

 
....

然后在你的点击function:

 $('.button').click(function() { mybox=$(this).attr("boxid"); $(mybox).[whatever code you need to slide the DIV in and out of the screen] .... }