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

我已经创建了一个jsfiddle来显示我目前的努力：http://jsfiddle.net/Durhammer/f4dphh7r/

我接近让它正常工作，但三角形的形状是“弹跳”，同时我正在努力让它从左边进入并从右边退出。

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

编辑：我更新了JS和小提琴，以更好地代表我想要实现的目标。 编辑：我想出来了，我的答案如下。

Answer 1

为什么不使用css：

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

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

P.s：你的jquery animate缺少时间;

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

不需要jQuery动画这个，CSS动画就可以了。只记得在.triangle

上添加css过渡

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

http://jsfiddle.net/jermund/00fef1bj/1/

Answer 4

我添加了提到的计时元素，但导致三角形元素跳转的原因是.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%"
           );
        });
});

我也更新了小提琴。

jQuery动画按钮背景形状

4 个答案: