How Do I Make An Image Repeatedly Show And Hide Every X Seconds?

I have an image that I want to show for 10 seconds and then hide for 10 seconds and then show for 10 seconds and hide for 10 seconds and do that process repeatedly forever, but I d

Solution 1:

I'm surprised no one gave a CSS-only answer yet, so here is one.

img {
  opacity: 0;
  animation: disappear 10s linear 0s infinite alternate;
}

/* The animation code */@keyframes disappear {
    from {opacity: 0;}
    to {opacity: 1;}
}

Solution 2:

Taking your question quite literal, I think this is what you want. Image shows for 10s hides for 10s, then shows for 10s and hides for 7s, repeat.

function promoFade() {
 $('#promo').delay(x).fadeOut(150).delay(x).fadeIn(150).delay(x).fadeOut(150).delay(x).fadeIn(150);
};
setInterval("promoFade()", 0);

Added setInterval in case you need to wait for the page to load. There are better ways and personally, I would lose the 7s and loop with CSS keyframes as mentioned in other answers, yet if I was chucking something together that was very simple, needing that 7s, this is what I would start with.

functionpromoFade() {
  $('#promo').delay(10000).fadeOut(150).delay(10000).fadeIn(150).delay(10000).fadeOut(150).delay(7000).fadeIn(150);
};
setInterval("promoFade()", 0);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="promo"class="gif"style="margin-top:33px;"><imgwidth="320"height="267"src="http://placehold.it/320x267/green/ffffff/&text=image"></div>

Solution 3:

The first question is whether you need the image to become invisible with layout remaining unchanged or the entire block to be removed and inserted again. I'm guessing its the former. Either way i prefer javascript. Use javascript setTimer to toggle opacity between 1 and 0, or set display to block or none.

$(document).ready(function() { $("#div_id_onclick").click(function() { setTimeout(function(){ $("#div_id_img").toggleClass("transparent"); }, X000); });});

Transparent class should be in css, with opacity set to 0.

I'm typing from phone, so please expect syntax mistakes and correct accordingly. Also set X to any integer value, --edit--

Just reminded myself that you need repeat event and not timeout. Use setInterval function.

setInterval(function(){$('.div_id_img').toggleClass('div_id_img_invisible')}, X000);

Div_id_img_invisible should override display or opacity property of div_id_img.

Solution 4:

<div id="promo"class="gif" style="margin-top:33px;">
     <imgwidth="320"height="267"src="assets/promo_xmas.png"></div><script>window.setInterval(function () {
    let gif = document.querySelector('.gif');
    if(gif.classList.contains('hide')) {
      gif.classList.remove('hide');
    } else {
      gif.classList.add('hide');
    }
   }, 10000); // or 7000 or whatever ;)</script><style>.hideimg {
    display: none;
  }
</style>

As prime suggests, it's better to add a fiddle https://jsfiddle.net/xwd1jcfg/