收银机上滑/下滑效果

Question

我正在尝试使用slideUp创建slideDown，div效果。基本上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');
       }
  });

Codepen here（无图像）如果您点击某个项目，则会弹出购物车。您还会注意到购物车不会向上滑动但会弹出。我希望它向上滑动并优雅地向下滑动但是返回原来的位置（不在屏幕外）。

Answer 1

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

• 隐藏：很好地隐藏，直到有人点击图片
• 最小化：只显示，但只有购物车，点击购物车=＆gt;最大化
• 最大化：完全可见，购物车+订单（？），点击 cart =＆gt;最小化

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

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

---测试和工作

但由于调整大小等原因，这可能会“脆弱”，但我打赌你可以解决一些问题： - ）