0

Does anyone know how I would - instead of having my idTabs fade - have them move from left to right? The could would need to be provided to this here: http://codebins.com/bin/4ldqp7r/2

Thanks!

Sal
  • 43
  • 1
  • 7

1 Answers1

0

The basic idea is to position the slide-out content to the left of the visible pane.

#adv2 {
  ...
  overflow: hidden;
  position: relative;
}
#adv2 ul{
  ...
  position: relative;
  z-index: 3;
}    
#adv2 span {
  z-index: 1;
}
#adv2 span p {
  position: relative;
  margin: 0;
  left: -410px;
  z-index: 2;
}

Then you add the javascript to render the slide out effect.

for (i in list) {
    $(list[i]).css({'left': '-410px', 'display': 'none'});
}
$(id).css({'display': 'none'}).animate({left: '+=410'}); 
Mr. 14
  • 9,228
  • 6
  • 37
  • 54
  • Hmm. I can't seem to get it working in the code. I'm not a wiz with this stuff. =\ – Sal Sep 27 '12 at 16:07
  • Ah. I think you misunderstand my request. This is my current slider: http://i.imgur.com/D0R6W.png. When you click on say, "The God and the Fate Revolution Para...," it will shift to: http://i.imgur.com/iChZm.png, fading between images. However, this is the transition I'm looking to accomplish: http://i.imgur.com/tLAk6.png, where the then-current selection slides out to the left, and is trailed by the new selection. – Sal Sep 29 '12 at 18:53
  • This [slider tutorial](http://css-plus.com/2010/09/create-your-own-jquery-image-slider/) might be helpful. It's basically the same idea, just arrange the images horizontally and change the position using jquery. – Mr. 14 Oct 01 '12 at 03:03