[英]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.