Доброе утро, делаю гирлянду на JS / Собрал 3 элемента, хочу сделать поочередное зажигание каждого, чтобы они загорались поочереди, подскажите правильно ли я делаю?
Как сделать что бы при повторном нажатии все исчезло?
Как сделать что бы она работала бесконечно?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("DIV#1");
div.animate({opacity: '0'}, 500);
div.animate({opacity: '1'}, 500);
div.animate({opacity: '0'}, 500);
div.animate({opacity: '1'}, 500);
div.animate({opacity: '0'}, 500);
});
$("button").click(function(){
var div = $("DIV#2");
div.animate({opacity: '1'}, 500);
div.animate({opacity: '0'}, 500);
});
$("button").click(function(){
var div = $("DIV#3");
div.animate({opacity: '0'}, 1000);
div.animate({opacity: '1'}, 500);
});
});
</script>
</head>
<body>
<button>ПУСК</button>
<br>
<br>
<br>
<br>
<br>
<div id="1" style="background:#98bf21;
height:100px;
width:100px;
opacity:0;
position:absolute;
border-radius: 100px;
">
<div id="2" style="background:#98bf21;
height:100px;
width:100px;
opacity:0;
margin-left:190px;
position:absolute;
border-radius: 100px;
">
<div id="3" style="background:#98bf21;
height:100px;
width:100px;
opacity:0;
margin-left:190px;
position:absolute;
border-radius: 100px;
">
</div>
</body>
</html>
