jQuery Animate 按钮背景形状

Question

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

他们使用 CSS 样式的三角形并在悬停时对其进行动画处理。

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%"
    )
 });
});

我创建了一个代码 sn-p 在这里展示我目前的工作：

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>

我即将让它正常工作，但三角形正在“弹跳”，而且 我正在努力让它从左侧进入并从右侧退出。 p>

我正在使用 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 动画缺少时间；

Answer 2

试试这个：

$( ".btn" )
  .mouseenter(function() {
    $( ".triangle" ).animate({right:"0px"}, 50);
  })
  .mouseleave(function() {
    $( ".triangle" ).animate({right:"100%"}, 50);
  });

或者纯css：

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

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

Answer 3

我添加了提到的计时元素，但导致三角形元素跳跃的是 .mouseover 和 .mouseout。

.mouseenter 和 .mouseleave 工作得更好。

jQuery(".btn")
   .mouseenter(function () {
     jQuery(this).find(".triangle").animate({
        right: "-50px"
     }, 500);
   })
   .mouseleave(function () {
     jQuery(this).find(".triangle").animate({
        right: "-500px"
     }, 500,
        function () {
           jQuery(".triangle").css(
             "right", "200%"
           );
        });
});

这里是sn-p的代码：

jQuery(".btn")
  .mouseenter(function() {
    jQuery(this).find(".triangle").animate({
      right: "-50px"
    }, 500);
  })
  .mouseleave(function() {
    jQuery(this).find(".triangle").animate({
        right: "-500px"
      }, 500,
      function() {
        jQuery(".triangle").css(
          "right", "200%"
        );
      });
  });

.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>

Answer 4

这个不需要 jQuery 动画，CSS 动画就可以了。只要记住在 .triangle 上添加 css 过渡

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

.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%;
    -webkit-transition: right 0.5s ease-in-out;
    transition: right 0.5s ease-in-out;
}
.btn:hover .triangle {
    right: 0;
}

<a href="#" class="btn">
	<span class="triangle"></span>
	<span>Button</span>
</a>