0

3 つのパネルと 3 つのボタンがあり、次のアクションを実行しようとしています。

<--- 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;
}
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 に答える