jQuery 动画按钮背景形状

Question

我正在尝试复制在该网站上看到的按钮悬停效果:http://www.dewitt.ch/

他们正在使用一个 css 样式的三 Angular 形并在鼠标悬停时对其进行动画处理。

jQuery(".btn")
 .mouseover(function () {
  jQuery(this).find(".triangle").animate({
    right: "-50px"
  }, 100);
 })
.mouseout(function () {
 jQuery(this).find(".triangle").animate({
    right: "-500px"
 }, 100,

 function () {
    jQuery(this).find(".triangle").css(
        "right", "100%"
    )
 });
});

我在这里创建了一个代码片段来展示我目前的努力:

jQuery(".btn")
  .mouseover(function() {
    jQuery(this).find(".triangle").animate({
      right: "0px"
    });
  })
  .mouseout(function() {
    jQuery(this).find(".triangle").animate({
      right: "100%"
    });
  });

.btn {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  display: inline-block;
  border: 1px solid #d5b7a0;
  color: #d5b7a0;
  font: 400 1.2em/1em Arial, Helvetica, sans-serif;
  height: 48px;
  line-height: 48px;
  margin-top: 20px;
  overflow: hidden;
  padding: 0 50px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: 0 0;
  cursor: pointer;
  transform: translate3d(0px, 0px, 0px);
}

.btn .triangle {
  width: 100%;
  position: absolute;
  top: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-top: 52px solid #d5b7a0;
  display: block;
  right: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="btn">
  <span class="triangle"></span>
  <span>Button</span>
</a>

我快要让它正常工作了，但三 Angular 形在“弹跳”，而且我正在努力让它从左边进入并从右边退出。

我正在使用 jQuery .mouseover 和 .mouseout 来触发 .animate 这可能不是最好的方法？

Answer 1

为什么不用css:

.btn .triangle {
  -webkit-transition:all 0.4s ease;
  right:100%;
}

.btn:hover .triangle {
  right:0;
}

P.s:您的 jquery animate 缺少时间；