Question

我有一个响应式轮播（使用CarouFredSel），点击时从49％宽度扩展到100％宽度，动画完成后，运行$(window).trigger('resize')以触发轮播内置响应。< / p>

但是，因为在动画完成之前不会发生触发，所以会出现明显的跳跃。问题：是否有一种方法可以在轮播扩展时触发窗口调整大小，实际上是模仿调整大小的窗口？

CodePen上的示例：http://codepen.io/chrisrockwell/pen/uozCj

编辑：在与其他人讨论后，笔可能不太清楚。所以，我添加了另一个包含2个警告语句 - 在动画的开头和结尾：http://codepen.io/chrisrockwell/details/Epuds

编辑2：CarouFredSel也有一个updateSizes event，我认为这与在窗口上触发调整大小相同。无论如何，当旋转木马“正在增长”时，我需要多次触发调整大小。

我希望这个例子能说清楚我正在尝试做什么 - 如果有其他方法可以在触发调整大小之外完成，请随时分享。

这是当前的JavaScript / jQuery：

$container.on('click', function() {
  if ($container.hasClass('expanded'))
  {
    $(this).animate({
      width: '49%',
      left: '50%',
    }, 1000, function() {
      $(window).trigger('resize');
      $container.toggleClass('expanded')
    })
  }
  else
  { 
    $(this).animate({
      width: '100%',
      left: 0,
    }, 1000, function() {
      $(window).trigger('resize');
      $container.toggleClass('expanded')
    })
  }
})

Answer 1

毕竟，解决方案相当简单。 <{3}}是

为每个动画元素的每个动画属性调用的函数。此函数提供了修改Tween对象的机会，以便在设置之前更改属性的值。

基本上，它允许您为动画的每个步骤提供回调函数。如果我将它与carousel插件提供的jQuery animate() has a step option结合起来（这与触发窗口调整大小基本相同），它会在父容器扩展时更新轮播的大小。

以下是动画执行操作的步骤选项示例：updateSizes custom event

以下是CodePen，它说明了当父级扩展时轮播扩展：http://jsfiddle.net/DAMkg/1/

这里是添加了步骤选项的相关JavaScript。请注意，animate（）现在包含两个简单对象，而不是一个简单对象，持续时间变量和回调函数。

$(this).animate(
  {
    width: '100%',
    left: 0,
  }, 
  {
    duration: 1000,
    step: function(now, tween) {
      $carousel.trigger('updateSizes')
    },
    complete: function () {
      $container.toggleClass('expanded')
    }
   }
);

使用$ .animate（）水平展开元素，并在展开时触发window.resize

1 个答案: