Continuous animation loop

I'm looking to continuously loop the animate function in jQuery. Here's the code I have:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".b").click(function(){
                    var a=$(".abb");
                    a.animate({top:'100px',left:'400px'},"slow");
                    a.animate({top:'20px',left:'500px'},"slow");
                    a.animate({top:'500px',left:'100px'},"slow");
                    a.animate({top:'100px',left:'800px'},"slow");
                    a.animate({top:'200px',left:'100px'},"slow");
                    a.animate({top:'300px',left:'0px'},"slow");
                    a.animate({top:'600px',left:'300px'},"slow");
                    a.animate({top:'100px',left:'700px'},"slow");
                    a.animate({top:'300px',left:'100px'},"slow");
                });
            });
        </script>
    </head>
    <body>
        <button class="b"> click </button>
        <div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>
    </body>
</html>

Could someone help me modify this script to run continuously without stopping? Thank you!

javascriptjqueryhtmlcss

Answer №1

Here's a cool animation trick for you to try out. This script will create an animated effect that restarts every 5 seconds (you can adjust the timing as needed).

<script type="text/javascript">
$(document).ready(function(){
    $(".b").click(function(){
    setInterval(animate_me,5000);
});
});

function animate_me()
{
  var a=$(".abb");
    a.animate({top:'100px',left:'400px'},"slow");
    a.animate({top:'20px',left:'500px'},"slow");
    a.animate({top:'500px',left:'100px'},"slow");
    a.animate({top:'100px',left:'800px'},"slow");
    a.animate({top:'200px',left:'100px'},"slow");
    a.animate({top:'300px',left:'0px'},"slow");
    a.animate({top:'600px',left:'300px'},"slow");
    a.animate({top:'100px',left:'700px'},"slow");
    a.animate({top:'300px',left:'100px'},"slow");
}
</script>

Answer №2

My preference is the following approach.

Using jQuery and JavaScript

var element=$(".abb");
$(document).ready(function(){
    $(".b").click(animateElement);
});
function animateElement(){
    element.animate({top:'100px',left:'400px'},"slow")
    .animate({top:'20px',left:'500px'},"slow")
    .animate({top:'500px',left:'100px'},"slow")
    .animate({top:'100px',left:'800px'},"slow")
    .animate({top:'200px',left:'100px'},"slow")
    .animate({top:'300px',left:'0px'},"slow")
    .animate({top:'600px',left:'300px'},"slow")
    .animate({top:'100px',left:'700px'},"slow")
    .animate({top:'300px',left:'100px'},"slow");
    setTimeout(animateElement, 6000);
}

Answer №3

One way to control the movement and stopping of an object is by using a flag called move, which can be set to true or false. This technique was demonstrated by Deryck.

Here is an example in HTML:

<button class="b">Move</button><button class="s">Stop</button>
<div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>

And the corresponding jquery code:

var move;
$(document).ready(function(){
    $(".b").click(function(){
          move = true;
          setInterval(animate_me,6000);

    });

     $(".s").click(function(){
          move = false;

    });

});
function animate_me()
{
    if(move===true)
    {    
       var a=$(".abb");
       a.animate({top:'100px',left:'400px'},"slow");
       a.animate({top:'20px',left:'500px'},"slow");
       a.animate({top:'500px',left:'100px'},"slow");
       a.animate({top:'100px',left:'800px'},"slow");
       a.animate({top:'200px',left:'100px'},"slow");
       a.animate({top:'300px',left:'0px'},"slow");
       a.animate({top:'600px',left:'300px'},"slow");
       a.animate({top:'100px',left:'700px'},"slow");
       a.animate({top:'300px',left:'100px'},"slow");
    }     
}

For a live demo, check out this Fiddle

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

Utilizing the dynamic duo of jQuery Overlay and Scrollable/Tabs to enhance direct navigation in web design

I am utilizing jQuery tools overlay to load a page through ajax. I need the ability to pass specific parameters to this page when the overlay is triggered. The goal is for the external page to be able to access these parameters upon opening and use jQuery ...

jqueryoverlay

How can callback functions be used with jquery-templ?

I am currently utilizing the plugin jquery-tmpl. Is there a way to define a callback function that runs after a template is executed? In other words, I want to achieve something like this: <script id='itemTemplate' type='text/html'& ...

javascriptjqueryjquery-templates

What is the method to include a new sibling element in e4x?

When trying to generate the following structure using e4x: <foo> <bar>example1</bar> <bar>example2</bar> </foo> Given that I already have the code snippet: foo.bar = <bar>example1</bar> What is the be ...

javascripte4x

Are there any events in JavaScript or with jQuery that will detect when the content inside a div is modified?

Possible Duplicate: Detecting changes in element content using jQuery My current challenge involves manipulating the selected option in a select element that only appears after a file upload within a module window. I have struggled to find a way to acce ...

javascriptjquerydrupaljquery-events

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

Generating a JavaScript bundle using the npm TypeScript compiler

Is there a way to compile TypeScript source files into one JavaScript bundle file? We have developed a tool on node.js and are currently using the following TypeScript compilation code: var ts = require('typescript'); ... var program = ts.creat ...

javascriptnode.jstypescriptbundle

Tips for managing the State with AppContext()---Need help figuring out how to handle

Why does setting the state userHasAuthenticated to true in the login function result in isAuthenticated being logged as false (staying the same in App.js as well)? Also, when trying to use it in the Home Component, it still shows false. //-------------- ...

javascriptreactjsuse-state

Transferring components as props from a higher order component (HOC) to the wrapped component

In my recent React project, I incorporated Higher Order Components (HOCs) to pass components as props to the wrapped component. I am curious if this approach has any drawbacks. Below is an example: HOC: import AnotherComponent from './a' funct ...

javascriptreactjsreduxfunctional-programminghigher-order-components

The pagination in React using React Query will only trigger a re-render when the window is in

Currently, I am utilizing React-Query with React and have encountered an issue with pagination. The component only renders when the window gains focus. This behavior is demonstrated in the video link below, https://i.sstatic.net/hIkFp.gif The video showc ...

javascriptreactjstypescriptpaginationreact-query

Guide on dynamically setting values for two indexes in ng-options using Angular.js

Can someone help me with this issue? I am trying to use two indexes ($index, $parent.$index) in the ng-options object with Angular.js. Below is my code explanation. <tr ng-repeat="d in days"> <td>{{d.day_name}}</td> <t ...

javascriptangularjs

Using <fieldset> allows you to display <select> elements in a vertical arrangement

As I work with this piece of html, JQuery populates my boxes and I am utilizing fieldsets to focus on only the necessary selection before POSTING it to my servlet. However, there seems to be an issue as the content is being displayed vertically when I ac ...

jqueryhtml

A guide on utilizing the Check All feature in nglightning for Angular 2

Is there a feature available in nglightning that allows users to check all records in a datatable? You can find the component at the following link: I am specifically looking for the ability to check all checkboxes in nglightning within the header row. Is ...

javascriptangulartypescriptdatatablesangular2-template

Which jquery version is the best fit for my script?

I wanted to figure out which version of jQuery I am using based on a script that my friend wrote for me. Unfortunately, he is on holiday and I can't reach him. I included the following code within my body tag and called it below: $(document).ready(f ...

javascriptjqueryaccordion

activating a button following the selection of a checkbox

My code includes a submit button that is currently disabled. I am looking to enable it when the user clicks on the "I agree" checkbox using jQuery. Can someone assist me with this? My code is written in HTML, JavaScript, and jQuery. <input id="agree" ...

javascriptjqueryhtmlcss

Using Javascript to Manage Scroll Stop Events

I am currently facing a challenge while working on an IOS (Cordova) application. I am developing it using core Javascript without relying on any framework like Ionic or Onsen UI. The issue I am encountering is that I need to trigger an event when the scrol ...

javascriptioscordova

How do I add a logo next to a title using CSS Bootstrap?

I am having trouble using Bootstrap to position my logo alongside my website name. I opted for Bootstrap because I want it to adapt smoothly as the webpage's dimensions change, but I'm struggling to get it right. Since I'm new to Bootstrap, ...

htmlcsswebbootstrap-4

Loading a dynamic image in ASP.net by utilizing the IMAGE.ImageUrl feature

I'm currently utilizing asp.net for a website and incorporating nested master pages. My objective is to dynamically load an image from the nested master page. Here is the HTML code snippet from the nested master page: <a runat="server"> ...

htmlasp.netimageurl

Turn off scrolling for the body content without removing the scrollbar visibility

Whenever I click a thumbnail, a div overlay box appears on top: .view-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; overflow-y:scroll; background-color:rgba(0,0,0,0.7); z-index:999; } Some browsers with non-f ...

javascriptjqueryhtmlcss

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Is AngularJS altering the DOM elements?

I'm still learning the ins and outs of AngularJS. While I've grasped data loading using AngularJS, I'm hitting a roadblock when it comes to implementing basic jQuery click events on the loaded items. Here's the code snippet in question: ...

jquery