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

Posted 2023-02-25

【中文标题】隐藏和显示 - 使用淡入淡出的幻灯片切换

【英文标题】：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/

【参考方案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 就像不透明度一样