Neste caso, você deveria usar uma função recursiva com setTimeout()
e usartrocar o método .queuedelay()
também com outro setTimeout()
para remover o atributo style
do elemento e chamar a função novamente. O .queue()
servirá como um callback do .delay()
para poder chamar a função novamente após 3 segundos. Se você não remover o atributo style
criado pelo jQuery, irá anular o :hover
do CSS.
(function rand(){
var arr = jQuery('.scenario a');
var ran = Math.floor(Math.random() * arr.length-1) + 1;
jQuery(arr[ran])
.css("opacity", "1");
.delaysetTimeout(500function(){
.queue(function(){
$jQuery(thisarr[ran])
.removeAttr("style");
setTimeout(rand, 3000);
}, 500);
})();
.scenario {
position: relative;
margin: auto;
height: 1120px;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/fundo_pascoa_1_1.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-top: -1px;
border-radius: 10px;
}
.scenario a {
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 4.53%;
top: 49.61%;
width: 2.7%;
height: 5.1%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
background-size: contain;
background-repeat: no-repeat;
}
.scenario a:hover {
opacity: 1;
}
.scenario a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 72.95%;
top: 59.35%;
width: 3.32%;
height: 3.64%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}
.scenario a+a:hover {
opacity: 1;
/* background-color: rgba(0, 255, 0, .5); */
}
.scenario a+a+a {
border-radius: 50%;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 13.92%;
top: 69.83%;
width: 4.77%;
height: 6.15%;
z-index: 2;
}
.scenario a+a+a:hover {
opacity: 1;
}
.scenario a+a+a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 50.92%;
top: 58.78%;
width: 5.45%;
height: 5.91%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);
}
.scenario a+a+a+a:hover {
opacity: 1;
}
.scenario a+a+a+a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 76.29%;
top: 65.99%;
width: 4.13%;
height: 4.78%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}
.scenario a+a+a+a+a:hover {
opacity: 1;
}
.scenario a+a+a+a+a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 83.9%;
top: 51.77%;
width: 3.56%;
height: 4.78%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
}
.scenario a+a+a+a+a+a:hover {
opacity: 1;
}
.scenario a+a+a+a+a+a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 18.01%;
top: 53.82%;
width: 4.21%;
height: 5.91%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}
.scenario a+a+a+a+a+a+a:hover {
opacity: 1;
}
.scenario a+a+a+a+a+a+a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 0;
-webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
position: absolute;
left: 66.1%;
top: 47.94%;
width: 3.16%;
height: 3.97%;
z-index: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
}
.scenario a+a+a+a+a+a+a+a:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenario">
<div class="happy-easter">
<img src="{{media url="wysiwyg/Paginas/pascoa/Logo_pascoa_1.png"}}" alt="" />
</div>
<a href="#openModal" title="Cupom 5OFF Páscoa"></a>
<a href="#openModal2" title="Cupom 10OFF Páscoa"></a>
<a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
<a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
<a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
<a href="#openModal5" title="Cupom Passarinho"></a>
<a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
<a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
</div>