Я установил зеленый крючок в правом нижнем углу фона. Но каждый раз я меняю статус кнопки и добавляю стиль greeen hook. Он должен был появиться в правом нижнем углу сразу же, однако возникает анимация, что зеленые крючки сначала появляются в левом верхнем углу, они перемещаются в правое нижнее. Вот два кадра:
первый кадр слева вверху
кадр лазера справа внизу
$(function(){
$(".base-type").click(function(){
$(".radio").show()
$(".type-choose").removeClass("type-choose")
$(this).addClass("type-choose")
if($(this).attr("id")=="will"){
$("#refund-type-3").parent().hide()
$("#refund-type-1").click()
}else{
$("#refund-type-3").click()
$("#refund-type-1").parent().hide()
$("#refund-type-2").parent().hide()
}
});
});
.base-type{
display: block;
width: auto;
height: 0.7rem;
padding: 0 0.3rem 0 0.3rem;
margin-top: auto;
margin-bottom: auto;
text-align: center;
font-size: 0.4rem;
border: 0.01rem solid #bbbbbb;
border-radius: 0.04rem;
background-color: #FFFFFF;
color: #bbbbbb;
margin-left: 0.5rem;
}
.type-choose{
border: 0.01rem solid #569DFF ;
color: #569DFF;
background: url(../css/imgs/check.png) ;
background-size: 0.3rem 0.3rem;
background-repeat: no-repeat;
background-position: bottom right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="base-type type-choose" type="radio" id="will">自愿退款</button>
<button class="base-type " type="radio" id="unwill">非自愿退款</button>