Search code examples
javascriptjqueryjquery-animatecaption

Appearing/disappearing caption every 5 seconds in jQuery


For a very specific project, I need my image captions to appear AND Disappear every X seconds. I managed to make them appear and disappear once, but I need to to "loop". Here's my code :

<figure>
  <img src="http://url/image.jpg" alt="Write your image description here" width="400" height="600">
  <figcaption class="test">Write your image caption here!</figcaption>
</figure>

Jquery :

document.createElement('figure');
document.createElement('figcaption');

window.setInterval(function(){$(document).ready(function(){
  $('figcaption').css('top','600px');
  $('figure')(function(){
  $(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},function(){
  $(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
             );
});

}, 500);

How can I do it ?

Thanks (a lot) in advance !


Solution

  • window.setInterval(function() {
      $('figcaption').slideToggle();
    }, 5000);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <figure>
      <img src="http://url/image.jpg" alt="Write your image description here" width="50" height="50">
      <figcaption class="test">Write your image caption here!</figcaption>
    </figure>