Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout.

http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/

My goal is to arrange 6 cards per row using CSS transition and setTimeout. However, I am facing a challenge where I cannot use increment for my left and top parameters within setTimeout, as it accumulates all increments and places the elements in their final positions prematurely.

var self = $(this);
if (increment % 6 === 0 && increment !== 0) {
    topIncrement++;
    leftIncrement = 0;
};
setTimeout(function() {
    self.css({
        'left' : 10 + leftIncrement * (resizedWidth + 20),
        'top' : $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)
    });
}, increment * 500)
leftIncrement++;
increment++;

Answer №1

One issue you are facing is that the variable is being shared across different timeouts. You need the JavaScript code to capture the x and y positions separately for each timeout (you need a snapshot of the x/y values using JavaScript closure).

To solve this problem, modify the setTimeout function in your code like this (refer to the updated fiddle):

var valuex = 10 + leftIncrement * (resizedWidth + 20);
var valuey = $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)
setTimeout(function() {
    self.css({'left' : valuex,
    'top' : valuey});
}, increment * 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

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

Creating a div that is positioned below an input form when it is focused can be achieved using

I am aiming to achieve the following: My goal is to generate a new div positioned directly below the input form that has been selected (each of the 3 input fields displayed will have a distinct div underneath). The selections made in these fields will the ...

The input-group-btn is positioned to the right of the field, appearing to float

The input-group-btn for the targetDate field remains fixed on the right side of the input group despite screen width variations until I introduce the automatically generated CSS from the hottowel generator. I require assistance in identifying which aspect ...

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Currently, I am diligently following the Vue.js AgGrid getting started tutorial step by step: https://www.ag-grid.com/vuejs-grid/ However, upon adding the <script> section and saving my progress, an error promptly appears: ERROR Failed to compile ...

Using Angular JS, the JSON method is invoked from a location external to the controller

How can I call an inner method from outside a controller in AngularJS? var app; (function (){ app = angular.module("gallery", []); app.controller("galleryController", ['$scope','$http', function($scope, $http){ var gallery = this; ...

How to monitor and respond to HTML modifications in a child component from a parent component in Angular framework

In the setup I have, there is a main component known as @Component({ selector: 'parent-comp' template: '<child-comp [inputData]="responseData"></child-comp> }) export class ChildComponent { public responseData: any; ...

Vue: Issue with Firebase Authentication REST API triggers 400 Bad Request Error

Here is the error message I am encountering: POST scheme https host identitytoolkit.googleapis.com filename /v1/accounts:signUp key AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k Address 74.125.24.95:443 Status 400 Bad Request VersionHTTP/3 Transferred850 B ...

Issue arising from changing classes in Internet Explorer

I've encountered an issue where I am trying to change the class of an element on a mouseover event, but it doesn't seem to fire as expected. However, when I add an alert in the function, it suddenly works. Here is the code that doesn't work ...

JS : Removing duplicate elements from an array and replacing them with updated values

I have an array that looks like this: let arr = ['11','44','66','88','77','00','66','11','66'] Within this array, there are duplicate elements: '11' at po ...

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

Retrieve the JSON data based on a specific key after a specified period

Hello there, I am encountering an issue with a specific JSON key. Let's say I have an external file containing JSON data structured like this: { "key 1":[ { "linkName":"key name 1.1", "linkUrl":"key URL 1.1" }, ...

Issue with Jenkins displaying parameter values

Objective: Establish a conditional string parameter that spans multiple lines Method: I have set up two different jenkins parameters. Active choices parameter Active choices reactive reference parameter(Choice type: For ...

What is the best method for utilizing dynamically assigned keys within a JSON object?

I am currently working with Rhino and I need to find a way to utilize a variable in order to define the key of a map. Here's an example of what I'm trying to achieve: var name = "Ryan"; var relationshipType = "brother"; var relatedName = "David" ...

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

Resize images to perfectly fit dimensions of your choice

After conducting thorough research and experimenting with various jQuery and Javascript solutions, I was unable to find a way to dynamically scale images both horizontally and vertically to a specific size while maintaining their aspect ratio. In my parti ...

Interacting with YouTube Data API without requiring user input

I'm currently developing a music website that enables users to create YouTube playlists. Initially, I experimented with JavaScript: https://developers.google.com/youtube/v3/code_samples/javascript The procedure involves an initial authorization ste ...

Confirming the structure of a URL using JavaScript/jQuery

I have a text field where users input URLs. I need to validate the format of the URL using regular expressions. Specifically, I am looking for invalid URLs such as: http://www.google.com//test/index.html //Invalid due to double slash after hostname http: ...

Transfer information from my class to a specific pathway

Currently, I am in the process of developing an application using Angular 2. My goal is to be able to send data from my class to a specific route within the application. Sample Code @RouteConfig([ { name: 'Slider', ...

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

Tips on resizing images within a container to maintain aspect ratio

I am trying to create a layout with a flex container containing 2 divs - one with an image that floats left, and the other with some paragraphs floating right. How can I make sure that the image scales alongside the paragraphs while maintaining its aspect ...