1

Tenho o seguinte codigo, onde os links estão escondidos com opacity: 0 e com hover ele passa a ter opacity: 1;

Porém preciso que o SetInterval, mostre aleatoriamente eles. Até por que no mobile não funciona o hover. Não tenho muito conhecimento em Java, alguém sabe o por que de não estar funcionando meu código?

<script>
  setInterval(function(){
    
    
    var arr = jQeury('.scenario a+a+a+a:hover');

    arr[9].show().delay(500).hide();
    

    
  }, 3000);
  
</script>
.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;
}

.scenario a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
    background-size: contain;
    background-repeat: no-repeat;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 1;
    -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;
}

.scenario a+a:hover {
    opacity: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
    /* 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;

}

.scenario a+a+a+a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);

}

.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;

}

.scenario a+a+a+a+a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);

}

.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;

}

.scenario a+a+a+a+a+a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.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;

}

.scenario a+a+a+a+a+a+a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);

}

.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;

}

.scenario a+a+a+a+a+a+a+a:hover {
    opacity: 1;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}
<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>

3
  • jQeury está digitado errado. Seria jQuery. Não sei se é esse o problema, mas é um erro de digitação visível.
    – Sam
    Commented 9/04/2019 às 14:10
  • No seu script está escrito jQeury ao invés de jQuery
    – X4vier
    Commented 9/04/2019 às 14:12
  • Certo, na hora de passar para ca escrevi errado. Mas mesmo com ele arrumado não funciona!
    – JVEUZEBIO
    Commented 9/04/2019 às 14:14

1 Resposta 1

1

Não use setInterval() para isso porque não vai haver sincronia com o tempo do .delay(), mas o principal problema (além de outros) é que o CSS só aplica o background com :hover, e isso não acontece no script jQuery.

Além do que você tem apenas 8 elementos <a> na div, e o arr[9] supostamente iria pegar o décimo elemento, que não existe. Além do que daria erro, porque arr[9] não é um objeto jQuery para aplicar os métodos .show(), .delay() e .hide(). Também usar .show() e .hide() não seria o correto, porque o que se deseja é alterar o opacity dos elementos e não o display deles.

O que tem que fazer é colocar os backgrounds dos elementos nos estilos dos elementos, e não na pseudo-classe :hover. O :hover deve ser usado apenas para alterar o opacity.

Outra coisa é que você não está gerando um número aleatório. É preciso gerar um número aleatório de 0 até a quantidade de elementos -1, que ficaria:

var ran = Math.floor(Math.random() * arr.length-1) + 1;

E aplicar o valor da variável ran no índice do seletor correto, que seria:

var arr = jQuery('.scenario a');

E usar como objeto jQuery:

jQuery(arr[ran])

Neste caso, você deveria usar uma função recursiva com setTimeout() e trocar o .delay() também com outro setTimeout() para remover o atributo style do elemento e chamar a função novamente. Se você não remover o atributo style criado pelo jQuery, irá anular o :hover do CSS.

Ficaria tudo assim:

(function rand(){
   
   var arr = jQuery('.scenario a');
   var ran = Math.floor(Math.random() * arr.length-1) + 1;
   
   jQuery(arr[ran])
   .css("opacity", "1");
   setTimeout(function(){
      
      jQuery(arr[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>

3
  • Muito obrigado pela explicação, perfeito cara!
    – JVEUZEBIO
    Commented 9/04/2019 às 16:23
  • qual seria a melhor forma de continuar a fazendo o efeito, pois depois de 5 objetos mostrado ele pausa em um e fica mostrando
    – JVEUZEBIO
    Commented 10/04/2019 às 16:54
  • 1
    Realmente havia um problema que eu não tinha visto. Arrumei o código. Abs!
    – Sam
    Commented 10/04/2019 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .