为div滑动而不是淡入淡出

Question

我相信这可能是一件很简单的事情。

我在试着把fade传给slide

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

目前，它在fade上运行得很好，我只需要将这一行调整为slide即可。我已经做了显而易见的事情，但我一定是对语法做了些什么，因为它不起作用。

提前干杯！

//添加

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>

Answer 1

如果你想要一个普通的幻灯片，使用.slideUp()和.slideDown()，如下所示：

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

You can view a demo here

如果您希望使用淡入淡出+滑动类型的效果，请将速度参数传递给.hide()和.show()，如下所示：

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

You can test that effect here

Answer 2

在fadeIn()中执行幻灯片。所以像fadeIn(){ slideIn })这样的东西...