I have taken a flip clock. I want to use it multiple times on my page. It is working fine only for single time. But when I am doing repeat the markup it is working for the single time and for rest of the type it's not working. The jQuery code goes like this
jQuery(document).ready(function($) {
setInterval(function() {
doFlip(3);
}, 1000);
function doFlip(numberIndex) {
var currentNumberElement = $(".number:eq(" + numberIndex + ")");
var currentNumber = Number(currentNumberElement.attr("data-number"));
currentNumber--;
if (currentNumber < 0) {
currentNumber = 9;
if (numberIndex > 0) {
doFlip(--numberIndex);
}
}
currentNumberElement.addClass("flip");
setTimeout(function() {
currentNumberElement.attr("data-number", currentNumber);
currentNumberElement.removeClass("flip");
}, 500);
}
});
and the markup goes like this
<span class="number" data-number="9">
<span class="primary">
</span>
<span class="secondary">
</span>
</span>
<span class="number" data-number="9">
<span class="primary">
</span>
<span class="secondary">
</span>
</span>
<span class="number" data-number="9">
<span class="primary">
</span>
<span class="secondary">
</span>
</span>
<span class="number" data-number="9">
<span class="primary">
</span>
<span class="secondary">
</span>
</span>
Here is the fiddle link where it's working for the single time.
You need to group each instance within an element, and run the timer for each instance like
jQuery(document).ready(function($) {
$('.flipper').each(function() {
var $flip = $(this);
setInterval(function() {
doFlip($flip, 3);
}, 1000);
})
function doFlip($flip, numberIndex) {
var currentNumberElement = $flip.find(".number:eq(" + numberIndex + ")");
var currentNumber = Number(currentNumberElement.attr("data-number"));
currentNumber--;
if (currentNumber < 0) {
currentNumber = 9;
if (numberIndex > 0) {
doFlip($flip, --numberIndex);
}
}
currentNumberElement.addClass("flip");
setTimeout(function() {
currentNumberElement.attr("data-number", currentNumber);
currentNumberElement.removeClass("flip");
}, 500);
}
});body {
font-size: 14px;
}
@keyframes animate-top {
0% {
background: #3e3e3e;
/* Old browsers */
background: -moz-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3e3e), color-stop(100%, #2b2b2b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #3e3e3e 0%, #2b2b2b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e3e3e', endColorstr='#2b2b2b', GradientType=0);
}
100% {
color: #474747;
transform: translateX(0px) translateY(0.35em) translateZ(5px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
}
@keyframes animate-bottom {
0% {
color: #474747;
opacity: 1;
}
100% {
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
}
}
@-webkit-keyframes animate-top {
0% {
background: #3e3e3e;
/* Old browsers */
background: -moz-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3e3e), color-stop(100%, #2b2b2b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #3e3e3e 0%, #2b2b2b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e3e3e', endColorstr='#2b2b2b', GradientType=0);
}
100% {
color: #474747;
-webkit-transform: translateX(0px) translateY(0.35em) translateZ(5px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate-bottom {
0% {
color: #474747;
opacity: 1;
}
100% {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
}
}
.number {
position: relative;
float: left;
margin-right: 5px;
font-size: 5em;
width: 1em;
height: 1.5em;
}
.number span {
position: absolute;
display: block;
font-weight: bold;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: white;
width: 1em;
height: 1.5em;
perspective: 7.14em;
}
.number span:before {
display: block;
height: 0.75em;
overflow: hidden;
line-height: 1.52em;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 20% 20% 0 0;
background: #3e3e3e;
/* Old browsers */
background: -moz-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3e3e), color-stop(100%, #2b2b2b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #3e3e3e 0%, #2b2b2b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #3e3e3e 0%, #2b2b2b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e3e3e', endColorstr='#2b2b2b', GradientType=0);
/* IE6-9 */
}
.number span:after {
display: block;
height: 0.75em;
overflow: hidden;
line-height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 0 0 20% 20%;
transition: color 100ms, background-color 100ms;
background: #252525;
/* Old browsers */
background: -moz-linear-gradient(top, #252525 0%, #070707 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #252525), color-stop(100%, #070707));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #252525 0%, #070707 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #252525 0%, #070707 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #252525 0%, #070707 100%);
/* IE10+ */
background: linear-gradient(to bottom, #252525 0%, #070707 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#070707', GradientType=0);
/* IE6-9 */
}
.flip .primary:before {
animation: animate-top 250ms;
-moz-animation-fill-mode: forwards;
-webkit-animation: animate-top 250ms;
-webkit-animation-fill-mode: forwards;
background: #000000;
/* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #303030 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #303030));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%, #303030 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 0%, #303030 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 0%, #303030 100%);
/* IE10+ */
background: linear-gradient(to bottom, #000000 0%, #303030 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#303030', GradientType=0);
/* IE6-9 */
}
.flip .primary:after {
animation: animate-bottom 250ms;
-moz-animation-fill-mode: forwards;
animation-delay: 250ms;
-webkit-animation: animate-bottom 250ms;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 250ms;
}
.primary:after {
opacity: 0;
transform: translateX(0) translateY(-0.28em) translateZ(0.35em) rotateX(91deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform: translateX(0) translateY(-0.28em) translateZ(0.35em) rotateX(91deg) rotateY(0deg) rotateZ(0deg);
}
.primary {
z-index: 2;
}
.secondary {
z-index: 1;
}
/* Number 0 */
[data-number="0"] span.primary:before {
content: "0";
}
[data-number="0"] span.secondary:after {
content: "0";
}
[data-number="0"] span.secondary:before {
content: "9";
}
[data-number="0"] span.primary:after {
content: "9";
}
/* Number 9 */
[data-number="9"] span.primary:before {
content: "9";
}
[data-number="9"] span.secondary:after {
content: "9";
}
[data-number="9"] span.secondary:before {
content: "8";
}
[data-number="9"] span.primary:after {
content: "8";
}
/* Number 8 */
[data-number="8"] span.primary:before {
content: "8";
}
[data-number="8"] span.secondary:after {
content: "8";
}
[data-number="8"] span.secondary:before {
content: "7";
}
[data-number="8"] span.primary:after {
content: "7";
}
/* Number 7 */
[data-number="7"] span.primary:before {
content: "7";
}
[data-number="7"] span.secondary:after {
content: "7";
}
[data-number="7"] span.secondary:before {
content: "6";
}
[data-number="7"] span.primary:after {
content: "6";
}
/* Number 6 */
[data-number="6"] span.primary:before {
content: "6";
}
[data-number="6"] span.secondary:after {
content: "6";
}
[data-number="6"] span.secondary:before {
content: "5";
}
[data-number="6"] span.primary:after {
content: "5";
}
/* Number 5 */
[data-number="5"] span.primary:before {
content: "5";
}
[data-number="5"] span.secondary:after {
content: "5";
}
[data-number="5"] span.secondary:before {
content: "4";
}
[data-number="5"] span.primary:after {
content: "4";
}
/* Number 4 */
[data-number="4"] span.primary:before {
content: "4";
}
[data-number="4"] span.secondary:after {
content: "4";
}
[data-number="4"] span.secondary:before {
content: "3";
}
[data-number="4"] span.primary:after {
content: "3";
}
/* Number 3 */
[data-number="3"] span.primary:before {
content: "3";
}
[data-number="3"] span.secondary:after {
content: "3";
}
[data-number="3"] span.secondary:before {
content: "2";
}
[data-number="3"] span.primary:after {
content: "2";
}
/* Number 2 */
[data-number="2"] span.primary:before {
content: "2";
}
[data-number="2"] span.secondary:after {
content: "2";
}
[data-number="2"] span.secondary:before {
content: "1";
}
[data-number="2"] span.primary:after {
content: "1";
}
/* Number 1 */
[data-number="1"] span.primary:before {
content: "1";
}
[data-number="1"] span.secondary:after {
content: "1";
}
[data-number="1"] span.secondary:before {
content: "0";
}
[data-number="1"] span.primary:after {
content: "0";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flipper">
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="flipper">
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
<span class="number" data-number="9">
<span class="primary"></span>
<span class="secondary"></span>
</span>
</div>