Javascript Setinterval Does Not Work

Asked

Viewed 78 times

1

I have the following code, where the links are hidden with opacity: 0 and with Hover he will have opacity: 1;

But I need the SetInterval, show them randomly. Up why mobile does not work the hover. I don’t have much knowledge in Java, someone knows why my code is not working?

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

javascript jquery css-hover

  • jQeury is typed wrong. It would be jQuery. I don’t know if that’s the problem, but it’s a visible typo.

  • Your script is written jQeury instead of jQuery

  • Right, at the time of passing for ca misspelled. But even with it tidy does not work!

1 answer

1


Do not use setInterval() for this because there will be no sync with the time of .delay(), but the main problem (in addition to others) is that CSS only applies the background with :hover, and this does not happen in jQuery script.

Beyond what you have only 8 elements <a> in the div, and the arr[9] supposedly would take the tenth element, which does not exist. Beyond that would give error, because arr[9] is not a jQuery object to apply the methods .show(), .delay() and .hide(). Also use .show() and .hide() would not be correct, because what you want is to change the opacity of the elements and not the display theirs.

What you have to do is put the backgrounds of the elements in the styles of the elements, and not in the pseudo-class :hover. The :hover should be used only to change the opacity.

Another thing is that you are not generating a random number. You need to generate a random number of 0 up to the amount of elements -1, who would stay:

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

And apply the variable value ran in the correct selector index, which would be:

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

And use as jQuery object:

jQuery(arr[ran])

In this case, you should use a recursive function with setTimeout() and change the .delay() also with another setTimeout() to remove the attribute style element and call the function again. If you do not remove the attribute style created by jQuery, will override the :hover of the CSS.

Everything would be like this:

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

  • Thank you so much for the explanation, perfect guy!

  • what would be the best way to continue doing the effect, because after 5 objects shown it pauses in one and is showing

  • 1

    There really was a problem I hadn’t seen. I packed the code. Abs!

Browser other questions tagged javascript jquery css-hover

You are not signed in. Login or sign up in order to post.