幻灯片，而不是淡出为一个div [英] Slide instead of Fade for a div

问题描述

我试图让 fade to slide ：

$ slides.eq（$ btns.index ））。fadeIn（）。siblings（）。hide（）;

目前，它对 fade ，我只需要将这一行调整为 slide 。我已经做了显而易见的事情，但我必须在语法上做一些事情，因为它不起作用。

提前喝彩！

//添加

  var 
 $ btns = $（'。btns a'）， 
 $ 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（）; 
返回false; 
}）; 
 $ btns.first（）。click（）; 
 
< div class =slides> 
< div>幻灯片1< / div> 
< div>幻灯片2< / div> 
< div>幻灯片3< / div> 
< div>幻灯片4< / div> 
< div>幻灯片5< / div> 
< div>幻灯片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> 
  

解决方案

如果您想要一张普通的幻灯片，请使用 .slideUp（） 和 .slideDown（） ，如下所示：

  $ slides.eq（$ btns.index（this））。slideDown（）。siblings（）。slideUp（）; 
  

您可以在这里查看演示

---

如果您想要淡入淡出效果，将速度参数传递给 .hide（） 和 .show（） ，就像这个：
$ b $ pre $ $ $ $ $ $ slides.eq（$ btns.index（this））。show（'slow'）。siblings（） .hide（ '慢'）;

你可以在这里测试这个效果

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>

解决方案

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

这篇关于幻灯片，而不是淡出为一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！