代码之家 › 专栏 › 技术社区 › MST QNB

如何使用jquery设置剪辑路径的动画

clip-path jquery-animate css jquery

2

MST QNB · 技术社区 · 9 年前

我试图用鼠标悬停来创建动画按钮,但我对动画有一些问题。我试过几种方法来完成它,不幸的是,我做不到。

行动应该是这样的

但我有两个

第一

第二

 $(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>

谢谢你们所有人

1 回复 | 直到 9 年前

1

0

Nate Anderson 6 年前

不需要使用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);

}