[英]Pseudo element in jQuery animate
單擊具有動畫效果的div 寬度達到50%后,我附加了一個帶有偽的圓,但是在播放動畫時它是隱藏的。 我也嘗試在div內使用span而不是偽元素,但沒有成功。 任何想法?
$('a').click(function() { $('div').animate({ width: 50 + "%" }, 2000); });
div { width: 0%; height: 2px; background: red; position: relative; } div span { content: ""; position: absolute; right: 0; top: -2px; width: 10px; height: 10px; background: red; border-radius: 50%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span></span> </div> <a>click</a>
我不想在播放動畫時隱藏圓圈。
您可以使用overflow: initial !important;
對於div
$('a').click(function(){ $('div').animate({ width: 50 + "%" }, 2000); });
div { width: 0%; height: 2px; background: red; position: relative; overflow: initial !important; } div span { display:inline-block; content: ""; position: absolute; right: 0; top: -2px; width: 10px; height: 10px; background: red; border-radius: 50%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span></span> </div> <a>click</a>
您也可以使用transition
並讓CSS做動畫。
的HTML
<div></div>
<a>click</a>
的CSS
div {
width: 0%;
height: 2px;
background: red;
position: relative;
transition: 2s;
}
div:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
z-index: 1000;
}
jQuery的
$('a').click(function() {
$("div").css("width", "50%");
});
$('a').click(function() { $("div").css("width", "50%"); });
div { width: 0%; height: 2px; background: red; position: relative; transition: 2s; } div:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: red; border-radius: 50%; z-index: 1000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <a>click</a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.