隐藏和显示 - 使用淡入淡出的幻灯片切换答案

【问题标题】：Hide and Show - slideToggle with fadeIn隐藏和显示 - 使用淡入淡出的幻灯片切换
【发布时间】：2012-12-20 04:52:04
【问题描述】：

我有一个包含三个链接的菜单，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，当它打开时fadeIn 和当它关闭时fadeOuts 与slideToggle。然后我希望所有三个链接都这样做并具有此效果，slideToggleFadeIn。

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

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

【问题讨论】：

标签： jquery fadein fadeout slidetoggle

【解决方案1】：

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

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

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

【讨论】：

抱歉，如果您与我发布的代码相比，您的代码中有些内容不正确（没有我想要的效果）。当我按linkOne 时，是的，它会向下滑动一次，但没有我想要的fadeIn。然后，当您再次按下它时，它不会关闭它并向上滑动，每次按下 linkOne 时它都会开始褪色。

【解决方案2】：

试试这个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}

【讨论】：

【解决方案3】：

我知道这很旧，但在您的元素上单击事件的事件侦听器回调中，您可以编写：

$('.yourels').on('click', function(e){
    $(e.target).slideToggle({
        progress : function(ani, now){
            $(e.target).css('opacity', now);
        }
    });
})

这里的整洁部分是 now 属性从 0 到 1 就像不透明度一样

【讨论】：