我有一个按钮元素，我想用作“添加到购物袋”按钮，但是一旦用户单击按钮，我想更改几种状态的文本。按钮的初始状态将显示为“添加到袋子”，然后在用户单击按钮后，按钮应更改为微调图像，然后在此状态的1秒钟动画之后，下一个状态将显示为“添加到袋子！”。然后最终它将返回到原始的“添加到购物袋”状态。
有关我要实现的目标的有效示例，请参见https://milkmakeup.com/products/matcha-cleanser/
我添加了部分代码，该代码创建了除旋转状态之外的所有内容
// Cart button text change
(function() {
$(".btn-cart").on("click", function() {
var $this = $(this),
oldText = $this.text();
$this.text("Added to Bag!");
$this.attr("disabled", "disabled");
setTimeout(function() {
$this.text(oldText);
$this.removeAttr("disabled");
}, 1600);
});
})();
在样本下面尝试
$( document ).ready(function() {
// Cart button text change
$(".btn-cart").on("click", function() {
var $this = $(this),
oldText = $this.text();
$this.html("<img width='50' height='50' src='http://www.bebestore.com.br/images/shared/lazyloader.gif'/>");
setTimeout(function() {
$this.text("Added to Bag!");
}, 3000);
setTimeout(function() {
$("img").hide();
$this.show();
$this.text(oldText);
}, 5000);
});
});button,div{text-transform:uppercase;background: #828282;
border: #828282 1px solid;
color: #fff; transition: opacity 0.2s; border-radius: 0;
cursor: pointer;
font-family: "Calibre SemiBold", arial, sans-serif;
font-size: 12px;
height: 45px;
letter-spacing: 1.5px;
line-height: 45px;
overflow: hidden;
padding: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 170px;
-webkit-appearance: none;}
/*div {
border: 7px solid #f3f3f3;
border-top: 7px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
}*/
span {
background: url(https://www.storefirst.com/static/common/images/loading-spinner.svg);
height: 30px;
display: inline-block;
width: 30px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句