Question 266099 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Refresh Divs every 5 seconds with scroll effect?

I have the following code and fiddle:
https://jsfiddle.net/bkoenig/2k5fcj1o/60/

It is working fine and every 5 seconds two new divs will be load and will be shown randomly. so far, so good.

Now I want to change the animation. I want that the divs the user sees at the moment scroll / slide up and disappear and the new divs scroll / slide up from bottom and stop.

after 5 seconds the animation starts again. hope you understand what I mean?

$(document).ready(function() {
  var divs = getRandomDivs();
  fadeTheDivs(divs);
});

function getRandomDivs() {
  return $("div.Image").get().sort(function() {
    return Math.round(Math.random()) - 0.5;
  }).slice(0, 2);
}

function fadeTheDivs(divs) {
  $(divs).show('slide').delay(5000).hide('slide').promise().done(function() {
    var divs = getRandomDivs();
    fadeTheDivs(divs);
  })

}
div.Image {
  display: none;
  width: 50px;
  height: 50px;
  background: tomato;
  margin: 2px;
  color: white;
  line-height: 50px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row" style="background:red;display:flex;">

  <div class="Image">1</div>
  <div class="Image">2</div>
  <div class="Image">3</div>
  <div class="Image">4</div>
  <div class="Image">5</div>
  <div class="Image">6</div>
  <div class="Image">7</div>

</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, maybe i found a better solution for me. fade in from top is working. refresh div every 5 seconds is working.

    this is the fiddle: https://jsfiddle.net/bkoenig/70x5k8hp/13/

    but how would it be possible to add the fade out animation? if i just add the css class to the divs it will fadein and fadeout directley without stay for a while.

    <div class="activities hide-at-start fade-in-from-top">This is content 1</div>
<div class="activities hide-at-start fade-in-from-top">This is content 2</div>
<div class="activities hide-at-start fade-in-from-top">This is content 3</div>
<div class="activities hide-at-start fade-in-from-top">This is content 4</div>
<div class="activities hide-at-start fade-in-from-top">This is content 5</div>
<div class="activities hide-at-start fade-in-from-bottom">This is content 6</div>

    @keyframes fade-in-from-top {
    0% {bottom: 100px;opacity: 0;}
    100%{bottom:0px;opacity: 1;}
}

@keyframes fade-out-to-bottom {
    0% {bottom: 0px;opacity: 1;}
    100%{bottom:100px;opacity: 0;}
}

.fade-in-from-top{
    position: relative;
    animation: fade-in-from-top 0.5s forwards;
}

.fade-out-to-bottom{
    position: relative;
    animation: fade-out-to-bottom 2.5s forwards;
}

.activities {
  border:1px solid lightgrey;
  padding:3rem;
  border-radius:25px;
}

    function showRandomDiv(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
 }

 showRandomDiv();   // runs once

 setInterval(showRandomDiv,5000); // change every 5s ;

  2. 0

    I think the best way to do this is to time it properly and adjust the keyframes (i hope this is what you mean by "stay for a while".)

    So, for the class .fade-in-from-top you have 0,5 second for the animation to take place and the keyframes are going from 0% to 100%.

    if you want the fadeOut animation to happen immediately after the fadeIn. then make the class '.fade-out-to-bottom' have twice the value of the fadeIn animation (1 second in this case). and set the keyframes to activate from 50% till 100%.

    This way you ensure that as soon as the fadeIn animation ends, the fadeOut animation starts. And if you want a delay between the two animations, just set a longer time interval for fadeOut and adjust the keyframe start percentage.

    a quick fix for you issue:

      @keyframes fade-out-to-bottom {
      50% {bottom: 0px;opacity: 1;}
      100%{bottom:100px;opacity: 0;}
   }

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search