隱藏和顯示 - slideToggle與淡入淡出

我有一個菜單有三個鏈接，linkOne，LinkTwo，linkThree。隱藏和顯示 - slideToggle與淡入淡出

linkOne：我把slideToggle放在上面。它的工作原理與我想要的一樣，當我按下它打開它，當我再次按下它時，這就是我所追求的。

$(document).ready(function(){ 

    $('.linkOne').click(function(e) { 
    e.preventDefault(); 
    $('.linkTwo-content').hide(); 
    $('.linkThree-content').hide(); 
    $('.linkOne-content').slideToggle(500);  
    return false; 
    });

linkTwo：在這裏我放了一個淡入淡出，也適用於這種效果。

$('.linkTwo').click(function(e) { 
    e.preventDefault(); 
    $('.linkThree-content').hide();  
    $('.linkOne-content').hide();  
    $('.linkTwo-content').fadeIn(500);   
    return false; 
    });

linkThree：我在這裏做的和linkTwo一樣。

$('.linkThree').click(function(e) { 
    e.preventDefault(); 
    $('.linkOne-content').hide();  
    $('.linkTwo-content').hide();  
    $('.linkThree-content').fadeIn(500);   
    return false; 
    }); 

});

我想要做的事情是要補充一點，我在linkTwo和linkThreer使用LinkOne效果淡入所以它成爲的slideToggle時，其開放，與的slideToggle fadeOuts當它關閉該淡入。然後，我希望所有三個鏈接都做到這一點，並具有這種效果，slideToggleFadeIn。

我不希望你改變代碼，因爲我想了解它裏面發生了什麼。所以，如果你可以幫忙，請不要只給它一個新的代碼。

這裏是小提琴http://jsfiddle.net/lamberta/Pkdj5/

來源

2012-12-20 lamberta

所以沒有那麼多冗餘我將更新你的代碼;應該很容易使用綁定到每個顯示/隱藏的鏈接的函數。我已經得到了你從這裏開始：

http://jsfiddle.net/Pkdj5/2/

.slideToggle更改爲.css('opacity' 0).animate({'opacity': 1, 'height', 'show'})，以創造同時淡入/滑動效果。如果您只想使用一個animate，則還可以將'toggle'值用於不透明度和高度。

來源

2012-12-20 05:55:38

對不起，什麼是不正確出現在你的代碼，如果你比作一個我張貼，該工程正確（沒有我想要的效果）。當我按下linkOne，是的，它滑下一次，但沒有淡入淡出我想要的。然後當你再次按下它時，它會關閉它並滑動，每當你按下linkOne時它就開始褪色。 – lamberta

試試這個http://jsfiddle.net/Pkdj5/11/

的JavaScript：

if(!$('.linkOne-content').is(":visible")){ 
    $('.linkOne-content').fadeIn(500); 
    $('.linkOne-content p').slideDown(500); 
} 
else{ 
    $('.linkOne-content').fadeOut(500); 
    $('.linkOne-content p').slideUp(500); 
}

CSS：

p {display: block}

來源

2012-12-20 09:42:00 phnkha

隱藏和顯示 - slideToggle與淡入淡出

回答

相關問題