幻灯片，而不是褪色一个div

我试图让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>

来源

2010-06-22 Andy

如果你想有一个正常的幻灯片，使用.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

来源

2010-06-22 23:35:36

我想他想同时滑动和褪色。 – griegs 2010-06-22 23:49:30

@griegs - 标题说“而不是”...所以我提供了两个选项，第二个选项有淡入/幻灯片组合效果，请试试:) – 2010-06-22 23:53:50

感谢尼克......完美......并感谢griegs为您提供最初的帮助 – Andy 2010-06-23 05:47:39

的淡入（内侧）做的幻灯片。所以像淡入（函数（）{}的slideIn）...

来源

2010-06-22 22:55:58 griegs

btw：这一切都在firefox中工作，但我在IE中有令人沮丧的结果。 IE往往会忽略动画，并最终呈现所有内容。这是在以前的版本的jQuery tho – griegs 2010-06-22 22:58:07

嘿谢谢，你的意思是这样吗？ $ slides.eq（$ btns.index（this））。fadeIn（function（）{slideIn}）。siblings（）。hide（）; – Andy 2010-06-22 23:03:03

实际上并不确定这些代码。似乎有点长。你可以发布你试图隐藏和幻灯片的HTML，因为我认为代码可以简单得多。 – griegs 2010-06-22 23:11:26

幻灯片，而不是褪色一个div

回答

相关问题