Using jQuery to smoothly fade in elements and slide them up with a delay

Question

Using jQuery to smoothly fade in elements and slide them up with a delay

Seeking assistance in adding a slideUp effect to my set of posts/divs in Wordpress that currently fade in one by one using jQuery.

I want the posts to slide up and fade in simultaneously, similar to this example: where they animate on filter click.

I've tried different methods but can't seem to achieve the desired result. Here's the code I have:

HTML

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

CSS

.elementor-post {float:left; margin-right:20px;}
.fade-in-post-container .elementor-post { display: none; }

jQuery

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(500 * i).fadeIn(1000);
});

Check out the jsFiddle here: https://jsfiddle.net/shan_2000_uk/kugc7m61/16/

I attempted the following:

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000).slideUp(1000);
});

Unfortunately, it's not working as expected... Thank you for your help!

jquery html css wordpress

Answer 1

Answer №1

Perhaps this is what you're looking for, but feel free to take a look at this jsfiddle example.

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000,function() {
            $(this).delay(250 * i).slideUp(1000)
        });
});

Answer 2

Perhaps this is what you're looking for, but feel free to take a look at this jsfiddle example.

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000,function() {
            $(this).delay(250 * i).slideUp(1000)
        });
});

Answer 3

Answer №2

If you're looking to achieve this effect using only CSS and no jQuery, the code snippet below might be just what you need. Give it a try and see if it works for you.

body {
  background-color: black;
  margin: 0;
}

.fade-in-post-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
}


.elementor-post {
  position: relative;
  border: 1px solid red;
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

.elementor-post:nth-child(1) {
  animation-delay: 1s;
}

.elementor-post:nth-child(2) {
  animation-delay: 2s;
}

.elementor-post:nth-child(3) {
  animation-delay: 3s;
}

.elementor-post:nth-child(4) {
  animation-delay: 4s;
}

.elementor-post:nth-child(5) {
  animation-delay: 5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 4

If you're looking to achieve this effect using only CSS and no jQuery, the code snippet below might be just what you need. Give it a try and see if it works for you.

body {
  background-color: black;
  margin: 0;
}

.fade-in-post-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
}


.elementor-post {
  position: relative;
  border: 1px solid red;
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

.elementor-post:nth-child(1) {
  animation-delay: 1s;
}

.elementor-post:nth-child(2) {
  animation-delay: 2s;
}

.elementor-post:nth-child(3) {
  animation-delay: 3s;
}

.elementor-post:nth-child(4) {
  animation-delay: 4s;
}

.elementor-post:nth-child(5) {
  animation-delay: 5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 5

Answer №3

You have the ability to animate without using a queue, allowing multiple animations to occur simultaneously:

jQuery(this).animate({ opacity: 0 }, { duration: 1000, queue: false });
jQuery(this).animate({ height: 0 }, { duration: 1000, queue: false });

Here is an example of working code:

$('#run').click(function() {
  $('.fade-in-post-container .elementor-post').animate({ opacity: 1 }, { duration: 4000, queue: false });
  $('.fade-in-post-container .elementor-post').animate({ marginTop: 0 }, { duration: 2000, queue: false });
});

.fade-in-post-container {

}

.fade-in-post-container .elementor-post {
  width: 25%;
  height: 50px;
  display: block;
  margin: 1%;
  border: 1px solid #000;
  float: left;
  margin-top: 300px;
  opacity: 0;
}

#run {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="run">Run effect</button>

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 6

You have the ability to animate without using a queue, allowing multiple animations to occur simultaneously:

jQuery(this).animate({ opacity: 0 }, { duration: 1000, queue: false });
jQuery(this).animate({ height: 0 }, { duration: 1000, queue: false });

Here is an example of working code:

$('#run').click(function() {
  $('.fade-in-post-container .elementor-post').animate({ opacity: 1 }, { duration: 4000, queue: false });
  $('.fade-in-post-container .elementor-post').animate({ marginTop: 0 }, { duration: 2000, queue: false });
});

.fade-in-post-container {

}

.fade-in-post-container .elementor-post {
  width: 25%;
  height: 50px;
  display: block;
  margin: 1%;
  border: 1px solid #000;
  float: left;
  margin-top: 300px;
  opacity: 0;
}

#run {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="run">Run effect</button>

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Using jQuery to smoothly fade in elements and slide them up with a delay

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to arrange an array of objects based on a specific attribute?

Why is the text getting covered by the drop down menu?

The BeautifulSoup select method is unable to select attribute values containing white space

The issue with Jquery Ajax not functioning correctly seems to be related to the Laravel Pagination feature

The overflowing issue with the Nextjs Tailwind Marquee Component is causing a display

Enabling or disabling mouse scroll wheel function across various web browsers

Stop the submission process by deactivating the button until a selection is made

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

Creating an If statement to evaluate the state of a parameter

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

Is there a way to remove the highlight from a non-active block?

Placing the toolbar of phpGrid at the top of the datagrid for easier access

Making modifications to index.html that is being hosted on GitHub Pages

Is there a way for the React select component to adjust its width automatically based on the label size?

The save feature becomes dysfunctional after switching to the Material-UI dependency in a React project

What is the best way to trigger a unique modal dialog for every element that is clicked on?

Is there a way to create a scroll down and scroll up button that is located outside of the scroll box

Connecting event logic to Bootstrap 5 dropdown clicks: A quick guide

Adding a list without a specific order into a paragraph with the help of jQuery

The card-img-overlay in Bootstrap 5 seamlessly integrates into the following div container