Randomly display multiple divs with a fade-in and fade-out effect

In my jQuery project, I am working on creating a dynamic effect where divs randomly fade in and out. Right now, I have managed to make one div do this successfully, but the others disappear completely.

What I really want is for a few random divs to continuously fade in and out. I want them to appear and then disappear sporadically throughout the page, creating a loop that runs indefinitely. Essentially, I need a recursive function!

You can see what I have achieved so far here: http://jsbin.com/qifavaceva/edit?js,output

I believe I need to store all the divs in an array, select random ones from that array, and then animate them accordingly.

If anyone has any suggestions or ideas on how to accomplish this task, I would greatly appreciate it!

Thank you & Best regards

javascriptjqueryhtmlcssfade

Answer №1

Is it possible to do one dot at a time? You can achieve this by moving the line 'markerArry.push(marker)' inside your createMarker function.

function fadeRandom() {
  var rand = Math.floor(Math.random() * markerArray.length);
  el = $('.animatedDots div:nth-child(' + rand + ')');
  el.fadeOut('1000').delay(2000).fadeIn('1000',fadeRandom);   
}

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

Read and manipulate website content using PHP

I recently encountered a challenging situation as a newcomer. Despite searching on Google, I couldn't find any information about it. There is a website that allows users to search for doctors in their area or state. It's possible that the number ...

phpjavascriptapi

Angular is patiently waiting for the Ajax service function to finish executing

Seeking help on retrieving the result of an $http request from my controller. Below is my service code : .service('postService', function($http, apiUrl) { return { post: function(uri, params) { $http.post(apiUrl + uri, ...

javascriptangularjs

Ways to maintain a connection in Node.js during page reloads

My website features a real-time updated list of all online users thanks to node.js (specifically now.js) The issue arises when a user navigates the site, causing a momentary disconnect as the new page loads. This temporary disappearance from the list for ...

javascriptnode.js

Utilizing static HTML, CSS, and JavaScript for secure backend administrative control

Seeking a solution for my static html, CSS, and JS website which includes some Jquery elements. I want to implement a user-friendly backend system that allows non-developer admins to log in, easily edit sections or change images with their own preferences. ...

phphtmlcssdynamicadmin

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

javascripthtmlcsscollision-detection

Ensure that errors are checked when the function returns a promise

I recently encountered an issue with a function called doSomething(), which returns a promise chain using the Q framework. The function is structured like this: loadDataSet : function (params) { return Q.fcall(function() { //Do Something ...

javascriptpromiseq

What is the best way to extract specific keys from a PHP JSON object?

I would like the PHP function to generate a list of keys where the value is equal to or less than a specified variable. <?php $t = 35; $jsonobj = '{"ABC":35,"DEF":36,"GEH":34}'; $obj = json_decode($jsonobj); ...

phphtmljsonajax

Explaining how conditional code snippets in React can handle different cases

Can someone help me with a problem I'm facing while trying to display different code snippets depending on the existence of a prop? The current code renders both cases regardless. Can anyone spot where the issue might be? { this.props.isParallax ...

javascriptreactjs

Working with nested JSON data in Node.js independently

Here is an example of a JSON structure: { "username": { "A1": { "L1": "usernameL1", "V1": "usernameV1" }, "A2": { "L2": "usernameL2", "V2": "usernameV2" } }, "pass ...

javascriptjsonnode.js

Setting Up One Stylesheet Based on Local Preferences

I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the l ...

htmlruby-on-railscsslocalization

What is causing my Rails Controller to anticipate JSON when receiving the format.js call?

While trying to add a new Sale_Contact to my Rails app using a Bootstrap 3 modal and AJAX, I encountered a problem. Despite receiving a 200 OK code from the server and successfully adding the Object to the database, the lack of JSON being returned caused a ...

javascriptjqueryruby-on-railsajaxjson

JavaScript can switch the rendering mode from quirks mode to standard mode in Internet Explorer

Is it possible to switch IE from quirks mode to standard mode using JavaScript? I am unable to edit the HTML content header, and adding a new IE=edge meta tag to the head element is not effective (it displays a message stating that the mode has been set ...

javascriptinternet-explorer

Scrolling using JavaScript's 'smooth scrolling' feature is currently disabled

Background of the Issue: I am in the process of creating a one-page website using Twitter Bootstrap 3 within an ASP.NET MVC project. The Challenge: My current challenge involves implementing 'smooth scrolling' functionality that scrolls to the ...

javascriptjquery

Fetching and storing external data into an array using AngularJS

I'm attempting to retrieve data from a database using an external script in order to populate a select dropdown. However, my current approach results in numerous empty li elements being generated. Although the count seems correct, nothing is actually ...

javascriptangularjs

Transferring a variable from a scriplet to JSP with the issue of a null

Seeking assistance with passing a variable from a scriptlet in one jsp to the 'calling jsp' The scenario involves assetedit.jsp posting a binary stream to upload.jsp. However, despite the processing of the stream in upload.jsp and determination ...

javascriptjavajsp

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

I am utilizing these customized components: import styled, { css } from 'styled-components' const Container = styled.div` background-color: ${props => props.theme === "light" ? "hsl(0, 0%, 98%)" : "hsl(235, 24%, 19% ...

javascriptcssreactjsstyled-componentsreact-props

Retrieve information from the database without the need to refresh the page

I recently implemented an Ajax function to update information in my database, but I encountered a problem. The element displaying this updated information does not reflect the changes immediately; only after refreshing the page and reconnecting to the data ...

javascriptphpjqueryhtmlajax

Adding a new row to an existing formArray in Angular: A step-by-step guide

Can someone help me figure out how to add a new row and remove a row on this form? editCity() { this.form = this.fo'',))), recepieType: } createForm() { this.form = this.formBuilder.group({ }); } I am looking to implement ...

javascripthtmlangular

developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs. JSFIDDLE: demo Here is how it should appear in desktop view: https://i.sstatic.net/ugAXd.png And here is the expected appearance ...

htmlcssbootstrap-4

Create a dynamic MUI icon that adapts to different screen sizes

Struggling to make the MUI DeleteIcon responsive and clickable. <ListItem> <ListItemAvatar> <Avatar src={sprites.front_default}> <ImageIcon /> </Avatar> </ListItemAvatar> <ListItemText pr ...

htmlreactjsmaterial-uiicons