隐藏和显示 - 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与淡入淡出

回答

相关问题