CODEWITHSUNDEEP
javascriptjqueryhtml
Andy
Andy

Reputation: 3021

Slide instead of Fade for a div

This could be a simple thing I'm sure...

I'm trying to get the fade to slide:

$slides.eq($btns.index(this)).fadeIn().siblings().hide();

At the moment, it works great with fade, I just need this line tweaked to slide. I've done the obvious but I must be doing something with the syntax as it doesn't work.

Cheers in advance!

//added

var
$btns = $('.btns a'),
$slides = $('.slides > div');

$btns.click(function(){
  $(this).addClass('current')
  $(this).parent().siblings().find('a').removeClass('current');
  $slides.eq($btns.index(this)).fadeIn(function(){ slideIn }).siblings().hide();
  return false;
});
$btns.first().click();

  <div class="slides">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
    <div>Slide 6</div>
  </div>

  <ul class="btns">
    <li class="one"><a href="#">1</a></li>
    <li class="two"><a href="#">2</a></li>
    <li class="three"><a href="#">3</a></li>
    <li class="four"><a href="#">4</a></li>
    <li class="five"><a href="#">5</a></li>
    <li class="six"><a href="#">6</a></li>
  </ul>

Upvotes: 1

Views: 1038

Answers (2)

Nick Craver
Nick Craver

Reputation: 630349

If you want a normal slide, use .slideUp() and .slideDown(), like this:

$slides.eq($btns.index(this)).slideDown().siblings().slideUp();

You can view a demo here

If instead you want a fade + slide type of effect, pass a speed parameter to .hide() and .show(), like this:

$slides.eq($btns.index(this)).show('slow').siblings().hide('slow');

You can test that effect here

Upvotes: 3

griegs
griegs

Reputation: 22760

inside the fadeIn() do the slide. so something like fadeIn(function(){ slideIn })...

Upvotes: 0

Related Questions