HTML

Question

我有这些代表我的技能类型的标签，当我将鼠标悬停在其中的任何上时，我试图触发动画。

HTML

<div class="col-xs-12 col-sm-12 skill-type-build-system ">

    <label class="col-xs-6 col-sm-3" style="text-align: right;">

        <a class="skill-build-system skillType" id="build-system" style="color: #757575;">Build System</a>

    </label>

    <div class="col-xs-3 col-sm-6">

        <div class="meter">
            <span style="background-color: rgb(66, 255, 255); width: 502px; text-align: left;"></span>
        </div>
        
        <div id="collapse-build-system" class="sub-skills" style="display: none">
        </div>

    </div>

    <label class="col-xs-2 col-sm-2" style="text-align: left;">93 %</label>

</div>

我已经尝试了

$('.skillType').hover(function(e) {

    var id = $(this).attr('id');
    $("#" + id).parent().find(".meter > span").each(function() {
        $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
            width: $(this).data("origWidth")
        }, 1200);
    });

    console.log('%c id = ' + id, "color: green;");

});

我可以获取console.log以显示我悬停的正确选择，但是动画似乎不会触发

实时设置 ：（技能娴熟）

https://www.bunlongheng.com/

Answer 1

我认为您的主要问题是，您在DOM中仅上升了1 .parent()，而实际上您需要上升2个级别才能让.find找到您要的内容。

我将其更改为.parent().parent()以获取包装的DOM节点。但是，最好将一个类添加到该包装节点（例如.skill-container），然后再执行.closest('.skill-container')来查找正确的节点。这样做会更好，因为如果您的DOM结构发生了变化（例如添加了第3个父对象），则无需更改JavaScript。或者，如果您不想添加新的类，则可能会起作用-.closest('[class*="skill-type"]')会在DOM树中向上移动，直到遇到带有包含字符串“ skill-type”的类的节点。

我也将.hover更改为.mouseenter，因为我只希望动画在鼠标悬停在其上而不是在鼠标离开时运行。 .hover正在触发动画，使鼠标进入和鼠标离开感到尴尬。但是如果您不同意，可以将其更改回去。

$(function() {
  $('.skillType').mouseenter(function(e) {
    $(this).parent().parent().find(".meter > span").each(function() {
      var w = 0,
        $el = $(this);
          
      if ($.hasData(this)) {
        w = $el.data("origWidth")
      }
      else {
        w = $el.width();
        $el.data("origWidth", w)
      }
      
        $el.width(0)
        .animate({
            width: w
        }, 1200);
    });
  });
});

.meter {
    height: 10px;
    position: relative;
    background: #555;
    border-radius: 5px;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    margin-top: 9px;
    padding-left: 0px !important;
}

.meter > span {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="col-xs-12 col-sm-12 skill-type-build-system ">

    <label class="col-xs-6 col-sm-3" style="text-align: right;">

      <a class="skill-build-system skillType" id="build-system" style="color: #757575;">Build System</a>

    </label>

    <div class="col-xs-3 col-sm-6">

      <div class="meter">
        <span style="background-color: rgb(66, 255, 255); width: 502px; text-align: left;"></span>
      </div>

      <div id="collapse-build-system" class="sub-skills" style="display: none">
      </div>

    </div>

    <label class="col-xs-2 col-sm-2" style="text-align: left;">93 %</label>

  </div>
</div>

在悬停时触发进度栏动画

HTML

我已经尝试了

1 个答案: