切换jQuery .animate函数?

时间:2014-11-26 16:23:54

标签: javascript jquery

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

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

我的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

1 个答案:

答案 0 :(得分:2)

为其他动画创建切换功能

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