jQuery's animation feature is experiencing significant delays when triggered by scrolling

Is there a way to make an image appear and disappear as the user scrolls by using the .animate() method? I have attempted to implement it, but unfortunately, it seems quite slow and sometimes the image does not reappear when scrolling back to the top. Take a look at this demo: DEMO

$(window).scroll(function(){
    if($(this).scrollTop() > 50){
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else{
        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

I have checked the console for errors and experimented with different CSS properties, but the delay persists. It appears that the issue lies in the combination of .scroll() and .animate(). Despite my efforts to research similar problems, I have not been able to find a solution. Can someone help me understand why this is happening?

jquerycssjquery-animate

Answer №1

When dealing with the scroll event, it's important to note that it fires continuously during scroll movement rather than just at the end of it. This can lead to multiple animate functions being executed unnecessarily.

To address this issue, a simple solution is to ensure that the animate function is called only once for each up or down scroll movement. Here's how you can implement this:

var animateOnce = true;
$(window).scroll(function(){
    if($(this).scrollTop() > 50 && animateOnce == true){
        animateOnce = false;
 
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else if($(this).scrollTop() <= 50 && animateOnce == false){
        animateOnce = true;

        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

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

Unlock the power of jQuery chaining with the val() method

My selected background color is set to: var _back = "#FF0000"; Why doesn't this code change the input field's background color: $("#input").val( _back ).css("background-color",$(this).val()); But this one does? $("#input").val( _back ) ...

javascriptjquerychaining

Incredible.js - Animated elements vanish within a fixed-height scrollable container

I recently implemented wow.js to add a fade-in effect to some divs nested under another div with fixed height and overflow set to auto. While most of the objects animate smoothly, I noticed that some of them either do not animate at all or fail to appear ...

javascriptjquerywow.js

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

javascriptjqueryhtmljson

Check and uncheck checkboxes in a hierarchical structure in real-time

I am facing a similar question to a previously solved issue regarding unchecking parent nodes if all children are unchecked using JQuery, but I am attempting to enhance the solution by ensuring that the children will also all uncheck if the parent is unche ...

javascriptjquerycheckboxtree

The viewport scaling issue occurs when transitioning from landscape to portrait orientation

While developing a mobile version of my website, I have encountered an issue with the behavior when rotating my iPhone device. Everything looks fine in landscape orientation, but upon rotation back to portrait, the viewport remains stuck at the landscape s ...

cssmobileresponsive-designmedia-queriesviewport

Using JavaScript to send information to an external website

My website is built with HTML and JavaScript/jQuery. Is there a way to automatically fill out a form on an external page (let's say Google.com) after clicking on a link from my site? For instance, I'd like to click on a link that takes me to Goo ...

javascriptjqueryselenium

How can I add a Facebook HTML5 Like Button to AJAX Pages?

I am trying to implement the Facebook HTML5 Like Button on my Ajax views. On my main page, this is what I have: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById( ...

jqueryajaxfacebookhtmlfacebook-like

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Looking at the layout, I have two sections that take up the entire page. My goal is to detect when the second section is 20% visible while scrolling, and then smoothly scroll to lock that section in place so it occupies the full space. This action should a ...

javascripthtmlcss

The dimensions of the parent element do not match the width and height of the image

My friend requested that I look into an issue on his website. In the portfolio section, there is a border around the div and a rollover effect when hovering over the images. However, there is a strange problem where the box containing the image and data is ...

htmlcssheightwidthgallery

nested objects within a JSON structure

If you have the following scenario: var test = '{"0":"1", "2":"3"}'; it results in an object with key-value pairs 0: 1 and 2: 3 How can I create an object that looks like this: object: 0: 1 2: 3 object: 4: 5 6: 7? I've attempted the fo ...

jqueryarraysjson

Tips for personalizing the streamlit expander widget

After diving into the streamlit components documentation, it became clear that rendering HTML code for the label parameter of the st.expander() function is not supported. Is there a way to work around this limitation? My exact requirement is as follows: ...

htmlcssstreamlit

The function Jquery .stop does not exist

I am encountering an issue with the magicline.stop function while attempting to implement an underline sliding effect for my navbar. I have tried to troubleshoot the problem but have been unsuccessful so far. Below is the code snippet: <nav class=" ...

javascripthtmljquery

Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change. https://i.sstatic.net/xjrsx.png I attempted the following: $theme-colors: ("p ...

csssassbootstrap-4

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

When I click on the image icon, it should be clickable and a popup dialogue box will open to upload a new image. Check out this sample image for reference. Any help on this would be greatly appreciated. Thanks in advance. <div class="d-flex align-ite ...

htmlcssangular

Save an image to server seamlessly with Ajax and ASP.NET without the need for page refreshing

I have developed a VB ASP.net page that enables users to upload, crop, and save images within a dialog box without the need for page refresh. I am exploring the possibility of implementing Ajax for this functionality. Is it feasible to achieve this using ...

jqueryasp.netajaxvb.netfile-upload

Simple Solutions for Moving Containers Up in Angular When Clicked

In the left side container, I have a header and sub-header, while the right side container contains text. However, whenever I click on the sub-header to display text on the right side, both container positions shift upward, hiding the header text. I'm ...

htmlcssangulartypescriptscroll

Updating a div using Ajax within a Rails application

In my to-do app, each task has subtasks stored in div elements with p id="task_"+<%=task.id%>I have a form for creating a new subtask on every show page of my project. To understand better, here is the code I am using: This is the show.html.erb fil ...

jqueryruby-on-railsajax

pictures showcased in a grid that dance and sway

Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...

cssgridview

What could be causing my function to exclude only the final element of the array when it returns?

My goal with the following code is to retrieve all items from item.children. However, I am puzzled as to why it's not returning the last item. After conducting multiple result logs and SQL verifications, I eventually pinpointed the issue in a specific ...

javascriptphpjqueryajaxfrontend