Добрый день всем!
Есть на попап окне 3 ползунка.
Нужно сделать, чтобы когда я перехожу на попап, срабатывала аниация,
т.е. выезжала линия и вместе в ней, ползунок.
Линию получилось сделать на jQuery, а ползунок никак
(В ползунке есть счетчик)
Как можно это реализовать?
Ниже весь код
<div class="wrap_counter">
<div class="box_counter">
<p class="count">800</p>
</div>
</div>
<div class="warn"></div>
</div>
.count {
text-align: center;
color: #fff;
font-size: 12px;
}
.box_counter {
position: absolute;
top: -27px;
left: 329px;
width: 31px;
height: 18px;
background-color: #555555;
}
.box_counter:after {
content: '';
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #555;
}
.wrap_counter {
width: 342px;
}
.warn {
width: 342px;
padding: 2px;
height: 2px;
background-color: #0467bb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.box_counter').each(function() {
$(this).prop('counter',0).animate({
counter:$(this).text()
},{
duration: 3000,
easing: 'swing',
step:function(now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
<script>
$(document).ready(function () {
$('.warn').hide();
$('.warn, .box_counter').show(1000);
});
</script>
Средний
