Question

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

＆lt; --- 1,2,3，---＆gt;

如果面板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;
}

Answer 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; }

向左和向右滑动标签面板

1 个答案: