What is so surprising about how a div moves and changes position?

What causes images and div elements to appear jerky when in motion?

<div>*</div>
$(function() {    
    var fps = 30;
    var a = 0;

    draw = function() {
        a += 0.001;  
        var x = ((Math.cos(a)+1) /2) *90;
        var y = ((Math.sin(a)+1) /2) *90;

        $("div").css("left", x + "%");
        $("div").css("top", y + "%");
    }

    update_frame = function(fps) {
        draw();
        setTimeout(function(){
            update_frame(fps)
        }, (1000./fps));
    }

    update_frame(fps);
});

https://jsfiddle.net/clankill3r/gx4xp1vx/

Answer №1

When you mention 'shock', I understand that the movement is not flowing smoothly. In such a situation, simply increase the fps value.

var fps = 120;

Enhanced fiddle version

The downside to this adjustment is that a higher refresh rate requires more processing power, which could be more noticeable when dealing with multiple elements or those with graphics - especially on slower devices.

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

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

Adding an option to a dropdown using JQuery in Google Chrome

Browser: Google Chrome 9.0.597.107 (Official Build 75357) Engine: WebKit 534.13 JavaScript Engine: V8 2.5.9.15 User Agent Info: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.107 Safari/534.13 JQue ...

Updating data in a SQL database using PHP when a button is clicked

This Question was created to address a previous issue where I had multiple questions instead of focusing on one specific question Objective When the user selects three variables to access data, they should be able to click a button to modify one aspect o ...

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

When using Visual Studio, inserting text into a cshtml file results in the deletion of existing

When working in Visual Studio 2022 (version 17.2.1), I've noticed a strange issue. Whenever I paste some text into a cshtml file, the pasted text appears to be copied but then immediately deleted, sometimes even taking part of the existing text along ...

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

I am incorporating a modal that corresponds each element of the object newCompanies to a specific row: {newCompanies.map((company, index) => { return ( <div> <div className="side- ...

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...

Crafting callback functions

My jQuery code looks like this: $('#current_image').fadeOut(function(){ $('#current_image').attr('src',newImage).show(); }); This process is wonderful - the nested function runs smoothly after the fadeOut. I ...

Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value? I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: <div class="small-box bg-green">, else < ...

Trigger keydown and click events to dynamically update images in Internet Explorer 7

There is a next button and an input field where users can enter the page number to jump to a specific page. Each page is represented by an image, like: <img src="http://someurl.com/1_1.emf" > // first page <img src="http://someurl.com/2_1.emf" ...

Unable to fetch Twitter data using AJAX

Currently, I'm working on a web page that aims to display tweets from a specific city based on a user's search topic. The Twitter request is being sent successfully, with a response code of 200, and the response data is visible in the Chrome deve ...

CSS Mouse Out Hover Effects with Long Duration

The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly ...

The missing piece of the puzzle that eludes me - implementing jQuery hover with Sidr

Introducing Sidr, a revolutionary plugin that transforms ordinary sidebars into sleek additions to your webpage. In my quest for customization, I endeavored to craft a bespoke button that would seamlessly toggle the sidebar's display. Enter the #hove ...

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

sliding effect of the background image

Currently, I am in the process of creating a navigation system that includes a background image slide effect. My goal is to mimic the design of a specific website: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/ However, my challenge lie ...

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...

What causes the discrepancy in margin values between desktop and mobile devices?

In my project, I have a collection of div elements that need to be spaced vertically from one another by the height of the window plus an additional 100px. However, I encountered a discrepancy when setting this margin using jQuery between mobile and deskto ...

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...