如何使用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] .... }