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为真时，您希望首先运行垂直动画。所以你需要先做垂直动画。

另一个问题是你没有在垂直动画中制作.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)
});

第二次单击时反转动画

3 个答案: