Trigger the fadeIn effect on multiple divs consecutively as they are scrolled to the bottom each time using Jquery

On my website, I want to implement a feature where more divs load using a smooth fadeIn() animation when the user reaches the bottom of the page.

Initially, I had this code in mind:

  $(document).ready(function() {

$(window).on('scroll resize', function (e) {
  /*desktop > 768px*/
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone1 == false && $(window).width() > 768) {
    $(".breakpoint").fadeIn(2500).css({
      "display": "grid"
    });
    $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone2 == false) {
      $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({
        "display": "grid"
      });
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone3 == false) {
        $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({
          "display": "grid"
        });
        oncedone1 = true;
        oncedone2 = true;
        oncedone3 = true;
        //oncedone4 = true;
      }

    }
  }
  /*mobile / < 768px*/
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone1v1 == false /*&& $(window).width() < 768*/) {
  //$(".breakpoint").fadeIn(2500).css({ "display": "grid" });
  //$("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone2v1 == false) {
  //  $("#home-page-best-anime, .home-page-best-anime").fadeIn(2500).css({ "display": "grid" });
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone3v1 == false) {
  //  $("#home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({ "display": "grid" });
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone4v1 == false) {
  //  $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({ "display": "grid" });
  //oncedone1v1 = true;
  //oncedone2v1 = true;
  //oncedone3v1 = true;
  //oncedone4v1 = true;
  //}
  //}
  // }
  //}
});

However, this approach caused some bugs as it would fadeIn the entire page instead of just the targeted div. So, I decided to utilize the .each function to handle fading in each div individually when the user scrolls to the bottom of the page:

$(window).on('scroll resize', function () {
            $('.bpshow').each(function (i) {
                if ($(window).scrollTop() + $(window).height() == $(document).height() && $(window).width() > 768) {
                    $(this).fadeIn(2500).css({ "display": "grid" });
                }
            });
        });

You can view the website I am working on here: AniBUY All Anime

jqueryhtmlcss

Answer №1

After some searching, I finally found a solution that worked perfectly for me.

    $(window).on('scroll resize', function (i) {
        $('.bpshow').each(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height() && $(window).width() > 768) {
                $(this).fadeIn(1500).css({ "display": "grid" });
            }
        });
    });

However, it was necessary for me to also include the 'bpshow' class in both breakpoint-1 and breakpoint-2 for each element, just like it is shown on the website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

csshtmllayout

two clicks on the sc-player

I've encountered a problem of duplicated events when using sc-player.js. I'm trying to change an iframe when a li element is clicked, but the play/pause buttons also trigger the same li click event. Is there a way to control the play/pause funct ...

javascriptjqueryhtml

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

javascripthtmlcssvue.js

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

Prevent repeating the same table header multiple times when generated dynamically with jQuery

I have an array called groups which contains name and regid. I want to display the name key as the column header of a table. To achieve this, I implemented the following code: var Name = v.name; var regId = v.regid; var rowStr = '<th d ...

javascriptjqueryhtmlarraysjson

Difficulty with info window within a for loop

I am currently working on implementing multiple info windows for markers. I found an example on Stack Overflow that I am trying to follow. Despite not encountering any errors in the console, the info windows do not appear as expected when clicking on the m ...

javascriptjquerygoogle-mapsinfowindow

Is it possible to fill dropdown menus on a webpage using jQuery or JavaScript without the need for an ajax call?

Currently, I am looking to populate multiple dropdown lists using jQuery when the page loads rather than relying on ajax responses to events. My Controller is responsible for creating several List objects that will be used for these dropdowns. Right now, I ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-4

What is the best way to establish a consistent layout across numerous pages?

As a novice in web development, I am currently experimenting with HTML and CSS to create my first webpage. My goal is to replicate the layout of various elements such as the background and header, but I have been facing challenges in achieving this. Recent ...

htmlcss

If the given response `resp` can be parsed as JSON, then the function `$

I was using this script to check if the server's response data is in JSON format: try { json = $.parseJSON(resp); } catch (error) { json = null; } if (json) { // } else { // } However, I noticed that it returns true when 'res ...

javascriptjqueryjson

Concealing a DisplayFor component with the help of Jquery

Hey there, I currently have a 'td' element that appears like this <td style="font-weight:bold"> @Html.DisplayFor(x => x.Parts[i].QtyInItem, new { htmlAttributes = new { @class = "qtyInItem" } }) </td> A ...

javascripthtmljqueryrazor

Is there a way to retrieve the text "ONLY ONCE" only between the <option> tags with a certain value using either jQuery or JavaScript?

Issue: When the user selects multiple check boxes, the text value from the option tags is duplicated in the item list. There are two lists: List 1 and List 2 I only want the text value to be copied once from the option tags in List 1 and List 2. Please ...

javascriptjquery

Input new information into a MySQL database with a simple click on a designated hyperlink

Is there a method to update information in a mysql database by clicking on a link? I am looking to implement a comment voting system on my website where when a user clicks on the "Vote for this comment" link, it should add +1 to the database... Any ideas ...

phpjavascriptjquerymysql

Experience the smooth glide on a CSS image

I am looking to add a unique animation to my menu, specifically a slide-down color effect instead of the typical fade transition on the first two divs. I envision it as a curtain-like animation. When hovering over an image, I want a colored panel to smoot ...

htmlcssanimationyui-pure-css

Trigger notifications exclusively for specific hyperlink texts that are selected

I'm facing an issue where I need to notify the user when a specific link text for a hyperlink is clicked. The code provided here showcases the problem I am currently encountering. At the moment, the alert triggers whenever any link text is clicked, ra ...

javascriptjqueryhyperlink

Determining if a mouse is currently hovering over an element using Javascript

I am working on a script that logs a message to the console if the user keeps their mouse over an element for more than 2 seconds. Here is the code snippet I have so far: var $els = document.querySelectorAll('#myDiv'); for(i = 0; i < $els ...

javascriptjquery

Ways to adjust .keyup based on the presence of a variable

I am currently in the process of constructing a search form that utilizes an ajax function within .keyup, which may have various arguments. I aim to determine if a specific argument should be included based on the presence of another value. Here is my curr ...

javascriptjquery

Encountering an undefined json array when making an AJAX request

There have been numerous questions on this topic, but none of the specific solutions seemed to apply to my situation. So, I apologize if this is a duplicate query. I am currently working on fetching data from an SQL database using a PHP file that passes t ...

javascriptphpjqueryjsonajax

Immediate add/modify

Exploring various websites online, I've come across platforms that offer the ability to manipulate data effortlessly. From inserting records to deleting and editing them, the process seems seamless. What's intriguing is how, upon clicking the r ...

c#javascriptasp.nethtmlsql

Creating image links in this jQuery Slider plugin: A beginner's guide

Currently, I am attempting to insert links into each photo within the slider. While I have successfully done this on two other websites, I am encountering difficulties due to variations in the code structure. <a href="http://www.google.com I have expe ...

jquerycsshyperlinksliderimage

CSS code that fixes a textarea at the bottom of a div

I need help placing a textarea at the bottom of a fixed div: <div id=msg> <div id=content> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> </div> <div id=text> <textar ...

css