Spontaneously fluctuate image transparency

I'm in need of some assistance with an issue I'm facing. I have 5 images positioned using Bootstrap and I want to add a fade animation to them on page load. Below is the code snippet I've been using, which works fine, but I would like the images to show up randomly. Can anyone help me achieve this?

$(function () {
            $('#fds img').each(function (i) {
               $(this).delay((i++) * 1000).fadeTo(2000, 1);
            })
        });
<div id="fds">
<div class="col-md-12 margin-b-2" style="padding-left: 0; padding-top: 20px">
    <div class="com-sm-6 col-md-3">
        <img id="img1" class="thumbnail" src="../img/1.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg1();" />
    </div>
    <div class="com-sm-6 col-md-3">
        <img id="img2" class="thumbnail" src="../img/2.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg2();" />
    </div>
    <div class="com-sm-6 col-md-3">
        <img id="img3" class="thumbnail" src="../img/3.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg3();" />
    </div>
    <div class="com-sm-6 col-md-3">
        <img id="img4" class="thumbnail" src="../img/4.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg4();" />
    </div>
</div>
<div class="col-md-12">
    <img id="img5" class="thumbnail" src="../img/5.png" alt="Alternate Text" style="padding-left: 10px; padding-right: 10px" height="300" width="1350" onclick="javascript:modalImg5();" />
</div>
</div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

$(function() {
      function RandomizeImages(o) {
        for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
      }; //inspired by CSS tricks!
      rand = [];
      $('#fds img').each(function(i) {
        rand.push(i);
      })
      RandomizeImages(rand);
      for (i = 0; i < rand.length; i++) {
        $('#fds img').eq(rand[i]).delay(i * 1000).fadeTo(2000, 1);
      }
    });

Example: http://jsfiddle.net/rdc47yqL/

Basically, the process includes getting image indexes, storing them in an array, shuffling/randomizing the array, iterating through it and selecting images using eq() selector.

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

When should you use isRequired for PropType versus defaultProps in a React application?

I often find myself confused about when to use .isRequired versus .defaultProps={...}. I personally feel that I should avoid using isRequired, as it seems like creating a potential bug in the application. By using isRequired, it automatically removes the n ...

javascriptreactjsdesign-patternsreact-proptypes

Arranging based on the initial elements of the array

Could I please receive the arrangement ['H','H','A','A'] from the given input ['H','A','H','A'] Is there a way to organize it according to the first occurrence of each charact ...

javascriptarrayssorting

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

As a newcomer to Angular, I recently attempted to create an accordion component but encountered unexpected behavior. Here is the HTML code for my attempt: <div class="faq-item-container"> <h1 class="mt-1 mb-5"><strong>Frequently A ...

htmlcssangulartypescript

What could be causing the malfunction of my href directory in my ReactJS project?

When I click the "Join Now" button, I am attempting to navigate to a specific file but it does not appear to be functioning as expected. In the image below, you can see that on line 9 there is an href for '/auth/login', however, when I click the ...

htmlreactjshyperlinkhref

Error encountered while executing Selenium Web Driver's executeScript method: [JavascriptError: missing ) after argument list] with name: 'JavascriptError'

return driver.executeScript("\ console.log('Error: Incorrect selection');\ $('option:selected', 'select[name='who']').removeAttr('selected');\ $('select[name='who'] ...

jquerynode.jsselenium

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

Steps to modify the background-color of an iFrame using CSS

I am attempting to extract HTML code from an iframe and apply a background-color to the class: class="body" The structure of my HTML source is as follows: <iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some ...

javascriptjqueryhtmlcssiframe

Adjust the image size to match the height of the frame

Working on a website where I want to incorporate a frame at the bottom of the screen, taking up 10% of space. I envision placing a logo within that frame, which seems straightforward. However, here is where it gets tricky. Since this frame's size de ...

html

Tracking the number of form submissions on a PHP website

I am looking to add a counter feature to my website where every time a form is submitted, the count increases for all visitors. The starting number will be 0 and each form submission will increment the count. While I can manage the count using JS/jQuery w ...

javascriptphpjqueryformscounter

Tips for creating multiple full-screen overlays in HTML

I am new to the world of web development and I am currently working on implementing a set of buttons that will trigger specific overlays when clicked. I found the following code snippet on W3schools which creates a button along with an overlay effect. < ...

javascripthtmlcss

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

cssreactjsmaterial-ui

List of checkboxes that will not trigger the AJAX call if only one checkbox is selected

Apologies for the quick repost, but I have exhausted numerous options in the hopes of finding a solution. I am facing an issue with my jQuery/AJAX form where it creates a blank result when only one checkbox is selected. However, selecting two or more chec ...

ajaxarraysjquerycheckbox

Using Vue.js to dynamically change attribute values based on a condition

I am currently displaying a v-tippy in the following manner: <label v-tippy content="My content text"> Everything is functioning as expected, but now I want to display it based on a condition show_tip == true. Is there a way to achieve th ...

javascriptvue.js

React-dnd supporting multiple draggable and droppable elements

I am facing a challenge with making multiple elements draggable using react-dnd. I have an array of 4 fields that I would like to make draggable, but when I map through the array and give each element a className of 'element', they do not move as ...

javascriptarraysreactjsreact-dnd

Using super() conditionally in Typescript

Is it possible to conditionally load the super class based on a parameter in TypeScript? I am facing an issue where I need to send a parameter in super() based on a specific condition, but placing an if statement before super() results in a compilation err ...

javascriptangulartypescript

Javascript Array Dilemmas

The current task; Determine whether the first string in the array contains all the letters of the second string. For instance, ['hello', 'Hello'] should result in true as all letters from the second string are found in the first, rega ...

javascriptarrays

CSS3 Marquee Effect - puzzled

After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome ...

htmlcssvalidationcss-animationsmarquee

Enhancing UI design with Vue.js

I'm attempting to customize elements using data from a JSON file in Vue.js: <div v-for="(item, index) in json._items" class="help-inner-callout" v-html="item.text" style="top:item.top; left: item.left;">&l ...

javascriptvue.js

Routes inoperative as intended

When using a standard expressroute for this login, I have noticed that even if the req.body.password is incorrect, I am still getting redirected to '/login'. router.post('/student/login', (req, res) => { if (req.body.password === ...

javascriptexpressroutes

ERROR: The data has reached its end prematurely (data length = 0, requested index = 4). Could this be a corrupted zip file?

Currently, I am developing a WhatsApp bot and storing the chat data in an Excel file using exceljs for further processing. In order to handle responses efficiently, I am utilizing promises to resolve them. Below is the function I have created to read the c ...

javascriptnode.jsexcelwhatsappexceljs