What is the best way to halt my jQuery animation?

(function ($) {
    $(document).ready(function () {

        $('#road').pan({ fps: 30, speed: 9 });

        $('#city2').pan({ fps: 30, speed: 2 });

        $('#city3').pan({ fps: 30, speed: 5 });

        $('#sky').pan({ fps: 30, speed: 0.5 });

        $('#plane1').sprite({ fps: 10, no_of_frames: 8 });

        $('#stop').click(function () {
            $('#body').stop();
            $('#city2').stop();
            $('#city3').stop();
            $('#sky').stop();
            $('#road').stop();
        });

    });
});

I have a code snippet here where I have some elements moving. I am trying to stop the movement of the city and road elements, but the stop function doesn't seem to be working. Can anyone assist me with this?

Answer №1

Have you attempted:

.stop(true)

Here's the code snippet:

    $('#stop').click(function () {
        $('#body').stop(true);
        $('#city2').stop(true);
        $('#city3').stop(true);
        $('#sky').stop(true);
        $('#road').stop(true);
    });

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

Issues with forms arising after the submission of ajax in Ruby on Rails applications

Having trouble with rails forms (remote: true) and their actions in a Rails 4 project. I am using two partials, one displaying a table of existing entries (e.g. workpackages) and the other for adding new entries. After submitting the form via AJAX to the ...

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

Effortlessly Styling Children Elements in Emotion JS When Parent Element is Hovered

This particular query seems to have been posed and resolved in various ways, but the solutions I've come across either do not pertain to Emotion or the responses related to Emotion haven't yielded results for me. I am currently using @emtion/[ema ...

Troubleshooting jQuery click event malfunction on Wordpress website

After spending a few hours trying to troubleshoot, I still can't figure out why my jQuery code isn't working when integrated into a Wordpress page. When the code is used as a standalone page, everything works perfectly. However, when converted t ...

Utilizing jQuery's load method to insert content into a div

My goal is to dynamically load the contents from external HTML files into a div called rightcontent on my webpage using jQuery's load method. Initially, the rightcontent div is empty, but as users interact with links on the page, text should be loaded ...

Creating a toggle label using just CSS: a step-by-step guide

Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript. Here is the code snippet that I experimented with: function genre_itemclick(item){ if(item.classList.contains('light_blue_border_button')) { ...

Is your webpage displaying unnecessary white space on smaller screens?

https://i.sstatic.net/t7Hyj.png .main { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; min-width: 100%; width: 100%; overflow-x: hidde ...

What is preventing my CSS variables from functioning in my Vue component that is utilizing SASS?

Currently, I am working with sass and vue version-3. Within one of my components, the following code is present: HelloWorld.vue : <template> <div class="greetings"> <h1>{{ msg }}</h1> <h3> You’ve succe ...

JavaScript code that uses jQuery does not function properly on an HTML form

Hello everyone, I am having trouble with some JavaScript code. Here is what I have: $(document).ready(function(){ $(".replyLink").click(function(){ $("#form-to-"+this.id).html(htmlForm()).toggle(500); return false; }); function htmlForm(){ var htm ...

problem encountered when inserting data (GET method) in a loop using window.location

I'm currently utilizing sailsjs to extract data from the GET parameter within the URL (mydomain.com/prod_master/addsupp). The specific page is /prod_master/addsupp, designed to receive GET parameters for database insertion. In my Javascript code, I ...

I am experiencing an issue with Bootstrap's Jumbotron where the bottom border is not visible even after setting it. I am quite curious as to why

I'm new to using bootstrap and I've encountered an issue with the Jumbotron class. Specifically, I have set a border for the Jumbotron and it appears on the top, left, and right sides, but for some reason, the bottom border is missing. After goi ...

Remove all links with a specific class within a <div> element, excluding the one that was clicked

Is there a way in jQuery to manipulate all links inside a <div> by removing/disabling or changing their classes, except for the one that was clicked? I need to change the class of the clicked link while potentially hiding or altering the others. < ...

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

Sending data between two HTML templates in Django

Currently working on a web project with Django, still learning the ropes of Django. I'm facing an issue that has me stumped: I need to retrieve user input from one HTML search box and show it on another HTML page. This is the code for my initial ...

Guide to serializing an array with JavaScript utilizing Web.api

I seem to be encountering a problem when trying to post an array to a web.api (api controller) in its simplest form. Here is the JavaScript code I have: var ann = { Age: 11, Name: 'Ann' }; var bob = { Age: 22, Name: 'Bob' }; var list ...

Is there an issue with this website link?

What is causing the Xul app to display the error message: XML Parsing Error: not well-formed when encountering this code snippet: <browser class="AppBar" type="content" src="test.html?img1=img1.jpg&img2=img2.jpg" flex="4"/> specifically ...

Transferring a JavaScript array over to PHP

I am dealing with a situation where I have a list stored in a PHP file like this: <ul id="alist"> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> By using jQuery, I have successfully captured that ...

Observe the present time in a specific nation

Is there an authorized method to obtain and showcase the current accurate GMT time instead of relying on the easily manipulable local time on a computer? I am looking for a reliable way to acquire the current time in hours/minutes, so I can make calculati ...

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

Is there a way to remove a record from my MySQL database by clicking on a row in a table that is generated using ejs? Below is the code I am currently using to generate the table rows. <% res.forEach(function(item){ %> <tr> ...