Всем привет!
Как правильно обратиться к классу имеющий псевдоэллемент ::after в jquery?
В скрипте так понимаю не срабатывает обращение на .class::after
Написал небольшой скрипт с анимацией для прокрутки и вот вылезло, не хочет работать...
Можете подсказать как можно сделать?
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 2600) {
effectFirst();
}
if ($(this).scrollTop() > 2600) {
effectSecond();
}
});
});
function effectFirst() {
$(".step__arrow::after").css('animation-play-state','running');
$(".step__arrow::after").css("opacity", "1");
}
function effectSecond() {
$(".step__image").css("animation-play-state", "running");
$(".step__image").css("opacity", "1");
}
<div class="step step__arrow">
<div class="step__image">
<img src="src/img/step/step1.png" alt="">
</div>
<p class="step__text">Вы звоните нам или оставляете заявку</p>
</div>
.step__arrow::after {
-webkit-transform: 360deg;
-ms-transform: 360deg;
transform: 360deg;
-webkit-animation-name: scrollAnimate;
animation-name: scrollAnimate;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.step__image {
-webkit-transform: 360deg;
-ms-transform: 360deg;
transform: 360deg;
-webkit-animation-name: scrollAnimate;
animation-name: scrollAnimate;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
