向左和向右滑动标签面板

时间:2012-12-05 22:03:13

标签: jquery

我有三个面板和三个按钮,我正在尝试执行以下操作:

< --- 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().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;
}

1 个答案:

答案 0 :(得分:2)

尝试这种方式:

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; }
豫ICP备18024241号-1