0

我有一个响应式轮播（使用CarouFredSel），它在点击时从 49% 的宽度扩展到 100% 的宽度，并且在动画完成后运行$(window).trigger('resize')以触发轮播的内置响应能力。

但是，由于在动画完成之前不会触发，因此会有明显的跳动。问题：有没有办法在轮播展开时触发窗口调整大小，实际上是在模仿调整大小的窗口？

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

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

编辑 2： CarouFredSel 也有一个updateSizes事件，我相信这与在窗口上触发调整大小相同。无论如何，我需要在轮播“增长”时多次触发调整大小。

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

这是当前的 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')
    })
  }
})
4

1 回答 1

0

毕竟，解决方案相当简单。 jQueryanimate()有一个step选项是

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

基本上，它允许您为动画的每个步骤提供回调函数。如果我将它与 carousel 插件提供的updateSizes 自定义事件（本质上与触发窗口调整大小相同）结合起来，它会在其父容器扩展时更新 carousel 的大小。

以下是动画执行它的步骤选项的示例：http: //jsfiddle.net/DAMkg/1/

这是说明旋转木马在其父级扩展时扩展的 CodePen：http ://codepen.io/chrisrockwell/details/Epuds

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

$(this).animate(
  {
    width: '100%',
    left: 0,
  }, 
  {
    duration: 1000,
    step: function(now, tween) {
      $carousel.trigger('updateSizes')
    },
    complete: function () {
      $container.toggleClass('expanded')
    }
   }
);
于 2013-09-17T13:16:16.760 回答