Question

我的网站上有一个动画技能栏，当该部分滚动到视图时会触发。到目前为止，一切都运作良好。除非视口更改/窗口调整大小，否则动画条不会调整到它并且太长或太短。

我试着解决这个问题 $(window).resize(function(){location.reload(); 但是在移动视口中，即使我只是滚动，它仍然会刷新页面。

我已经在网上搜索是否有办法重新加载特定的jquery函数，但是找不到任何东西。或者老实说，我猜想我并不理解，也无法让它发挥作用。以下是我发现的内容：https://css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/

我读到有一种方法可以让网站重新加载整个js文件。但由于我的页面上还有其他动画，我不知道这是否是最佳方式。

如果有人能帮助我，我很高兴。我对编码非常陌生，我的js / jquery知识仍然非常有限/不存在。

这是我的酒吧动画脚本

  var $meters = $(".meter > span");
    var $section = $('#skills .meter');
    var $queue = $({});

    function loadDaBars() {
        $meters.each(function() {
            var $el = $(this);
            var origWidth = $el.width();
            $el.width(0);
            $queue.queue(function(next) {
                $el.animate({width: origWidth}, 800, next);
            });
        });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            $(document).unbind('scroll');
        }
    });

技能栏的宽度通过div类定义，跨度以％表示。也许这有一个css解决方案？

编辑：这就是我的html和css代码的样子

＆＃13;

.meter {
  background-color: hsla(54, 73%, 95%, 1);
  vertical-align: bottom;
  width: 100%;
  position: relative;
}

.meter>span {
  display: block;
  background-color: rgb(241, 233, 166);
  position: relative;
  overflow: hidden;
}

＆＃13;

<div class="col-lg-6 col-md-6 col-sm-6">
  <div class="meter">
    <span style="width: 50%"></span>
  </div>

＆＃13;

Answer 1

动画完成后，您将删除栏的样式属性。这样css规则将再次适用：

$el.animate({width: origWidth}, {duration: 800, complete: function (){$el.removeAttr('style')}}, next);

（假设css定义的宽度是响应的）

如何使我的动画技能响应

1 个答案: