幻燈片，而不是褪色一個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

回答

相關問題