Идея в том, что если мы не кликаем, то сразу заполняется первый элемент. Если у него 100% width
, то у этого элемента удаляем class="active"
и width="0"
и добавляем активный класс следующему и так до конца. Но есть возможность кликнуть на блок, тогда этот блок должен иметь class="active"
и анимация width
до 100%
, а у всех элементов сбрасывается, ну вроде как по клику работает, и начальный active тоже, но пока у меня начинаются проблемы когда нужно выбрать следующий элемент, как можно это сделать?
$(function() {
var st;
$(".elem").click(function() {
if ($(this).hasClass("active")) {
return false;
} else {
var self = $(this);
$(".elem").find(".load").css("width", "0");
$(".elem").removeClass("active");
$(this).addClass("active");
function timeCounter() {
var totalTime = 0,
sec = 0,
loader = 0;
clearInterval(st);
st = setInterval(counter, 100);
function counter() {
if (sec > 99) {
return false;
} else {
totalTime += 1;
sec = parseInt(totalTime);
loader = sec + "%";
}
$(self).find(".load").css("width", loader);
};
}
timeCounter();
}
});
$(".elem").each(function() {
if (!$(this).hasClass("active")) {
return false;
} else {
var self = $(this);
$(".elem").find(".load").css("width", "0");
$(".elem").removeClass("active");
$(this).addClass("active");
function timeCounter() {
var totalTime = 0,
sec = 0,
loader = 0;
clearInterval(st);
st = setInterval(counter, 100);
function counter() {
if (sec > 99) {
$(self).next().addClass("active");
$(self).removeClass("active");
return false;
} else {
totalTime += 1;
sec = parseInt(totalTime);
loader = sec + "%";
}
$(self).find(".load").css("width", loader);
};
}
timeCounter();
}
});
});
.elem {
width: 100px;
height: 100px;
margin-bottom: 10px;
border: 1px solid #000;
}
.load {
height: 100%;
width: 0;
background: orange;
}
.elem.active {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elem active">
<div class="load"></div>
</div>
<div class="elem">
<div class="load"></div>
</div>
<div class="elem">
<div class="load"></div>
</div>
<div class="elem">
<div class="load"></div>
</div>