jquery - 我如何使用 jquery 为剪辑路径设置动画

Question

我正在尝试创建鼠标悬停的动画按钮，但我在动画方面遇到了一些问题。我尝试了多种方法来完成它，不幸的是，我做不到。

Action 应该是这样的

但是我有两个

第一个

第二个

 $(document).on("mouseover", ".sider_button_txt", function () {
  var dataId = $(this).attr("data-id").replace("txt","box");
  
  if ($("[data-id='"+ dataId +"']").attr("class") === "right_side")
  {
  $("[data-id='"+ dataId +"']").addClass("right_side_adjust");
  }
     $("[data-id='"+ dataId +"']").animate({
   			height: 0 + "%"
   		});
});

$(document).on("mouseout", ".sider_button_txt", function () {
 var dataId = $(this).attr("data-id").replace("txt","box");
 
  if ($("[data-id='"+ dataId +"']").attr("class") === "right_side")
  {
  $("[data-id='"+ dataId +"']").removeClass("right_side_adjust");
  }
  $("[data-id='"+ dataId +"']").animate({
   height: 100 + "%"
   });
});

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/* Center the demo */
html, body { height: 100%; }
body {display: flex; justify-content: center; align-items: center;}
div#box_container{width:600px; height:100px; background-color:#ef6224;}
p{font-family:'Droid Arabic Kufi', serif !important; }

div#left_side_shape { position: relative; width: 100%; height: 100%; background-color: #333333;
	-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
 /* clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
  float:left;
  z-index:0;
}

.right_side_adjust
{
  margin-top:-16.75% !important;
  float:left !important;
}

div#right_side_shape{
  position: relative;
  width: 100%;
	height: 100%;
	background-color: #222222;
	-webkit-clip-path: polygon(0 100%, 40% 100%, 60% 0, 0 0);
  /*clip-path: polygon(60% 0, 0 0, 0 100%, 40% 100%);*/
  z-index:0;
}

#left_side_txt{
  font-size:45px;
  color:#ffffff;
  margin-left:-575px; 
  z-index:1;
  font-family:'Droid Arabic Kufi', serif;
}

#right_side_txt{
  z-index:1;
 /* float:right;*/
  color:#ffffff;
  font-size:40px;
  margin-left:100px;
  font-family:'Droid Arabic Kufi', serif;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id= "box_container">

<div id='left_side_shape' class="left_side" data-id="love_stream_en_box">
  
</div>
<div id='right_side_shape' class="right_side" data-id="love_stream_ar_box">
 
</div> 
</div>

 <p id='left_side_txt' class="sider_button_txt" data-id="love_stream_en_txt">
 Lovestream
 </p>
 <p id='right_side_txt' class="sider_button_txt" data-id="love_stream_ar_txt">
 حب المشاهدة
 </p>

谢谢大家

Answer 1

不需要使用jquery，不用jquery也可以实现动画，但是这个技术可能只在Google Chrome中有效； check this example.

div#entext
{
  z-index:-1;
  position: relative;
  width:100%;
  height:100%;
  -webkit-clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  background-color:#444444;
  transition: all 1s;
}
#entextp:hover + #entext {
 -webkit-clip-path: polygon(0 0%, 40% 0%, 40% 0%, 0 0%);
  clip-path: polygon(0 0%, 40% 0%, 40% 0%, 0 0%);
  background-color:rgba(255,255,255,0);

}