Tips for smoothly transitioning elements to a visible state with a Fadein effect

I have been using a code snippet I found to fade in elements with the class "hideme" as I scroll to them. However, the elements only fade in when they are fully visible. Is there a way to modify the code so that they fade in as soon as they appear in the browser?

I attempted to change the ">" to "=" in this line and it somewhat worked:

if( bottom_of_window = bottom_of_object ){

But it's not functioning properly when applied to the second set of elements.

Thank you!

Original Source: http://jsfiddle.net/tcloninger/e5qaD/

Here is the code:

$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it in */
            if( bottom_of_window = bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });

});

Answer №1

Make sure to only check the visibility of the top of the element

        let topPosition = $(this).position().top;

        let bottomPosition = $(window).scrollTop() + $(window).height();

        /* Fade in the element if its top is visible in the window */
        if( bottomPosition >= topPosition ){

            $(this).animate({'opacity':'1'},500);

        }

For the updated JSFiddle, click here: http://jsfiddle.net/e5qaD/2727/

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

Exclude the key-value pair for any objects where the value is null

Is there a way to omit one key-value pair if the value is null in the TypeScript code snippet below, which creates a new record in the Firestore database? firestore.doc(`users/${user.uid}`).set({ email: user.email, name: user.displayName, phone: ...

Creating dynamic content with Jquery templates using nested JSON objects

Currently, I am working on an app where I need to showcase a student's progress card using jQuery templates. However, I have encountered a difficulty while dealing with a JSON string as shown below: "[{"ID":1, "Name":"Frank", "Age":15, "Status":"Pass ...

Redux - Preventing Overwriting of Product Quantity in Cart by Creating a New Object

Is there a way to address the issue where adding the same product multiple times to the cart creates new objects instead of increasing the quantity? switch (action.type) { case actionTypes.ADD_TO_CART: const product = state.products.find((p) = ...

Incorporate HTML into server forms while dynamically appending form elements in ASP.NET

I have a database table that stores custom fields for specific forms. While I am able to dynamically build these forms from the code behind, the layout is not visually appealing. I am looking for a way to neatly wrap the form in a table. Below is the code ...

Using jQuery and AJAX to send a post request in a Razor page and automatically redirect to the view returned by a MVC Action (similar to submitting

I send a json array to the MVC Action using either JQuery or Ajax, and the Action processes the request correctly. However, when the MVC Action returns a View, I am unsure of how to redirect to this View or replace the body with it. Overall, everything se ...

Which one relies on the other: angular-data or angular-cache?

I'm struggling to get angular-cache set up properly. According to the documentation: Angular-cache is a dependency of angular-data and must be loaded before angular-data if you are using angular-data. That's all well and good, but what if I only ...

Tips for utilizing a file name when using the move_uploaded_file function

I have a mission to produce a video and then transfer the video onto a file server. I am capable of creating the video, which is stored as a BLOB, and converting it into a file format. After that, my aim is to upload this file onto the server. The html a ...

The JavaScript-set value in a form field is not being transmitted to the PHP script within the $_POST array

Struggling to pass a JavaScript value to a .php script, and then on to a .txt script. It works fine with regular numbers, but when trying with the variable it fails, leaving the .txt file blank. Despite extensive research online, I can't seem to get i ...

Declaring a Javascript variable within an if statement does not alter the value of the global variable

Currently, I am working on enhancing my HTML projects by using JavaScript to modify the video source. Below is the video element in question. <div> <video id="songVid" onmouseover="controlsVid()"> <source src=&qu ...

Tips for accessing an Angular service from different Angular controllers

I am a beginner with angular js and I am currently exploring ways to call the service provided in the code snippet below from a controller. The service is defined as follows. app.factory('myappFactory', ['$http', function($http) { v ...

Error occurs in Query component when using a higher order component (HOC) due to element type

I've developed a custom higher-order component called withInfiniteScroll, designed to enable infinite scrolling functionality for a basic list of data. My aim is to integrate this HOC within Apollo's Query component, but I'm encountering an ...

Having trouble with a React child component not reacting to a click event?

The current issue I am experiencing is that the component is not triggering a click event when the button is clicked. TickerPage render() { return ( <div className="TickerPage"> <div className="TickerPage-container"> <b ...

In React (Next.js), the act of replacing a file is performed instead of adding a file

I kindly request a review of my code prior to making any changes. const test = () => { const [files, setFiles] = useState ([]); //I believe I need to modify the following statement. const handleFile = (e) => { const newFiles = [] for (let i= ...

Exploring an alternative perspective on successful login in angular.js

Today was the beginning of my project to convert a website to angular.js. The main page is served by index.html and includes ng-view for other views such as login and signup. Working closely with a backend developer, I have successfully integrated a rest c ...

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

Is it possible that the method of wrapping options using an array is not functioning correctly in the quiz app being managed in React?

I need your help in figuring out where I've made a mistake. The following line is causing an error: const choices = Array.forms(document.querySelectorAll('.choice')); console.log(choices); ...

The angular application fails to load the page properly and keeps refreshing itself

I'm currently working on an Angular app that searches for a Github user based on their username and then displays the list of repositories. When a user clicks on a repo name, it should show the open issues and contributors associated with that reposit ...

Working with MongoDB - Updating multiple subarrays within an array

Is it possible to delete elements from multiple subarrays within a single large array? The structure I'm working with is as follows: { "id": { "$oid": "" }, "users": [ { "friends": [ "751573404103999569" ] }, ...

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...