2

我有一个包含三个链接的菜单，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/

4

3 回答 3

0

试试这个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-20T09:42:00.627 回答
0

我会更新你的代码，所以没有那么多冗余；使用绑定到每个适当显示/隐藏的链接的函数应该很容易。我让你从这里开始：

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

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

于 2012-12-20T05:55:38.457 回答
0

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

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

整洁的部分是 now 道具从 0 变为 1 就像不透明度一样

于 2018-11-28T21:12:24.150 回答