收银机滑动up/slide向下效果

Question

我正在尝试使用 div 创建 slideUp、slideDown 效果。基本上 div 包含购物车的内容。当用户查看商品时，购物车应该隐藏起来，但是当他们点击 img 时，它应该弹出并切换。看起来像这样...

我得到了各种疯狂的效果，大多数情况下在切换时几乎总是完全隐藏购物车。它应该只是 return 到上图所示的位置。

我目前的代码。

 $( ".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（无图像）如果您单击某个项目，购物车将弹出。您还会注意到购物车不会向上滑动而是弹出。我希望它优雅地向上滑动和向下滑动但是 return 到它的原始位置（不离开屏幕）。

Answer 1

您应该改用 animate 函数。另外，我不太确定我是否理解正确，但看起来购物车有 3 种可能的状态：

隐藏：很好地隐藏起来，直到有人点击图片
最小化：只可见，但只有购物车，点击购物车 => 最大化
最大化：完全可见，购物车 + 订单 (?)，点击购物车 => 最小化

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

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

--- 测试和工作

但这可能是 "brittle" 由于调整大小等原因，但我敢打赌你能想出办法:-)

收银机滑动up/slide向下效果

Cash register slide up/slide down effect

html

javascript

jquery-animate