jquery - 隐藏和显示 - SlideToggle 和 fadeIn

Question

我有一个包含三个链接的菜单:linkOne、LinkTwo、linkThree。

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 中使用的 FadeIn 效果添加到 LinkOne 中，这样它就成为一个在打开时淡入的 SlideToggle，在关闭时随 SlideToggle 淡出的效果。然后我希望所有三个链接都执行此操作并具有此效果，slideToggleFadeIn。

我不希望你对代码进行太多更改，因为我想了解其中发生的情况。因此，如果您可以提供帮助，请不要只是添加新代码。

这是 fiddle http://jsfiddle.net/lamberta/Pkdj5/

Answer 1

我会更新你的代码，这样就不会有太多冗余；使用绑定(bind)到每个适当显示/隐藏的链接的一个函数应该非常容易。我已经让你从这里开始了:

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

.slideToggle 更改为 .css('opacity' 0).animate({'opacity': 1, 'height', 'show'})为了创建同时淡出/滑动效果。如果您只想使用一个动画，您还可以使用'toggle' 值来设置不透明度和高度。