Javascript 收银机上下滑动效果

我正在尝试创建一个带有

div

的

slideUp

，

slideDown

效果。基本上，

div

包含购物车的内容。当用户查看物品时，购物车应收起，但当他们点击

img

时，购物车应弹出并切换。看起来像这样

我有各种各样的疯狂效果，在切换时几乎总是完全隐藏购物车。它应该回到上图所示的位置

我现在的代码

 $( ".cart" ).on( "click", function() {

   if ($('.tabBox').height() > 91)
       {  
       $('.tabBox').height('90px').slideUp();
       console.log('slide up');
       }
   else
       {
       $('.tabBox').height('150px').slideDown();
       console.log('slide Down');
       }
  });

---

（无图像）如果单击某个项目，购物车将弹出。您还将注意到，购物车不会向上滑动，而是弹出。我希望它能优雅地上下滑动，但要回到原来的位置（不要离开屏幕）。

您应该使用动画功能。此外，我不太确定我是否正确，但看起来购物车有3种可能的状态：

• 隐藏：很好地隐藏起来，直到有人点击图像
• 最小化：仅可见，但只有购物车，单击购物车=>maximize
• 最大化：完全可见，购物车+订单（？），单击 购物车=>最小化

我只想删除第一个状态，这使解决方案更容易一些，但正如您所看到的，调整以适应第三个状态并不难：

cartMaximized = false;

$( ".cart" ).on( "click", function() {

    $('.tabBox').stop( true );

    if( cartMaximized ) {
       $('.tabBox').animate({ height: '90px' });
    }
    else
    {
       // You can play around with outerHeight() and so on, but that's out of scope
       // $('.tabBox').animate({ height: $('.content').outerHeight()+45+'px' });
       $('.tabBox').animate({ height: '150px' });
    }

    cartMaximized = !cartMaximized;
});

---测试和工作

但由于尺寸调整等原因，这可能会变得“脆弱”，但我敢打赌你一定能找到答案：-）