0

我有三个面板和三个按钮，并试图实现以下操作：

<--- 1, 2, 3, --->

  • 如果面板 1 在视图中并且您单击 2：面板 1 从左侧滑出视图，面板 2 从右侧进入视图
  • 如果面板 2 在视图中并且您单击 1：面板 2 滑出到右侧，面板 1 从左侧进入视图。
  • 如果面板 3 在视图中并且您单击 2：面板 3 滑出到右侧，面板 2 从左侧进入视图。

等等等等

这是我一直在尝试的 jQuery：

var tabs = $('#panels>li');

$('.tab').click(function (e) {
  e.preventDefault();
  var current_tab = tabs.eq($(this).index()).show("slide", { direction: "left" }, 1000);
  tabs.not(current_tab).hide("slide", { direction: "right" }, 1000);
});
$(".tab:first").click();
});

.show()如果我只使用and ，这很好用.hide()，但是如果我尝试添加幻灯片动画 ( "slide", { direction: "left" }, 1000)，它会中断（面板不出现）....知道我做错了什么吗？

hTML：

<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

<ul id="panels">
 <li>Panel 1</li>
 <li>Panel 2</li>
 <li>Panel 3</li>
</ul>

CSS：

#panels > li {
  display: none;
}
4

1 回答 1

1

试试这个方法：

http://jsfiddle.net/VgXK4/21/

jQuery：

var panels = $('ul#panels li');
panels.css('left','-500px').first().css('left','0px');

$('.tab').click(function() {
    var target = $(this).index();
    panels.each(function(i){
        if( i != target) { $(this).stop().animate({'left':'-500px'},1000); }
        //hides all other
        else{ $(this).stop().animate({'left':'0px'},1000); }
        //shows matched ele
    });
});​

CSS：

ul#panels { position:relative; overflow:hidden; width:500px; height:500px; }
    ul#panels li { position:absolute; left:0px; top:0px; }
于 2012-12-05T22:46:41.563 回答