Question

我试图创建一种情况，在点击时，菜单项会滑出然后垂直展开。我已经实现了这一目标，但是当菜单关闭并重新打开时，菜单项会在他们离开的地方拾取并进一步展开！

如何切换或重置垂直移动？

我的jQuery：

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

HTML：

<div class="square">
    <div class="box">
        CLICK
        <div class="tab1 tab"></div>
        <div class="tab2 tab"></div>
        <div class="tab3 tab"></div>
    </div>
</div>

的CSS：

.square{
    margin-left:100px;
}
.box{
    position:relative;
    width:150px;
    height:150px;
    background-color:#000;
    color:#fff;
    text-align:center;

 }

.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;
}

JSFiddle

Answer 1

为其他动画创建切换功能

$('.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)
});

FIDDLE

切换jQuery .animate函数？

1 个答案: