二次单击即可反转动画

Question

我有单击的子菜单元素，滑出然后展开以填充一个空间。 在第二次单击时，我希望动画在滑入之前反转，但是我的jquery知识不足以实现此目的。 有人可以帮忙吗？

我的js：

$('.box').click(function(){
    var flag = $(this).data('flag');

    $('.tab1').toggle("slide", { direction: "left"}, 500);
    $('.tab2').toggle("slide", { direction: "left" }, 500);
    $('.tab3').toggle("slide", { direction: "left" }, 500);

    $('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}); 
    $('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});    

    $(this).data('flag', !flag)
});

的jsfiddle

Answer 1

元素的动画在上一个元素完成后运行，因此此刻左幻灯片将始终运行，并且在完成后，垂直动画会开始播放。

当flag为true时，您希望垂直动画首先运行。 因此，您需要先执行垂直动画。

然后，另一个问题是您没有在垂直动画中对.tab2进行动画处理，因此它开始收缩得太早并且看起来很奇怪。 您可以通过在垂直动画期间对其设置0px动画来解决此问题，因此它将等待直到正确的收缩时间：

 $('.box').click(function(){ var flag = $(this).data('flag'); if(flag) { $('.tab1').animate({top: '+=50px'}); $('.tab3').animate({top: '-=50px'}); $('.tab2').animate({top: '+=0px'}); } $('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500); if(!flag) { $('.tab1').animate({top: '-=50px'}); $('.tab3').animate({top: '+=50px'}); } $(this).data('flag', !flag) }); 

 .square{ margin-left:100px; } .box{ position:relative; width:150px; height:150px; background-color:transparent; color:#fff; text-align:center; } .tab4{ position:absolute; right:10px; top:50px; width:70px; height:40px; background-color:grey; } .tab{ width:70px; height:40px; background-color:grey; display:none; } .tab1{ position:absolute; right:-70px; top:50px; } .tab2{ position:absolute; right:-70px; top:50px; } .tab3{ position:absolute; right:-70px; top:50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div class="square"> <div class="box"> <div class="tab4">CLICK</div> <div class="tab1 tab"></div> <div class="tab2 tab"></div> <div class="tab3 tab"></div> </div> </div> 

Answer 2

我已经更新了您的Jsfiddle：

http://jsfiddle.net/VDesign/k52c9h12/5/

JS代码

$('.box').click(function(){
    if($(this).hasClass('open'))
    {
        $('.tab1').animate({top: '-=50px'}); 
        // add callback function to wait untill tab1 and 3 are back to 0
        $('.tab3').animate({top: '+=50px'}, function() {
          $('.tab1').toggle("slide", { direction: "left"}, 500);
          $('.tab2').toggle("slide", { direction: "left" }, 500);
          $('.tab3').toggle("slide", { direction: "left" }, 500);   
        }); 

        $(this).removeClass('open');
    } else {
        $('.tab1').toggle("slide", { direction: "left"}, 500);
        $('.tab2').toggle("slide", { direction: "left" }, 500);
        $('.tab3').toggle("slide", { direction: "left" }, 500);

        $('.tab1').animate({top: '+=50px'}); 
        $('.tab3').animate({top: '-=50px'}); 

        $(this).addClass('open');
    }
});

Answer 3

这只是订购问题。 试试看：

function slide(){
    $('.tab1').toggle("slide", { direction: "left"}, 500);
    $('.tab2').toggle("slide", { direction: "left" }, 500);
    $('.tab3').toggle("slide", { direction: "left" }, 500);
}

function expand(flag){
    $('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}, 500); 
    $('.tab3').animate({top: (flag ? '-=50px' : '+=50px')}, 500);
}

$('.box').click(function(){
    var flag = ($(this).data('flag')!=undefined)?$(this).data('flag'):true;
    if(flag){
        slide();
        expand(flag);
    }
    else{
        expand(flag);
        setTimeout(slide, 500);
    }
    $(this).data('flag', !flag)
});