Animating a group of images with JQuery

Hey there! I've been working on a simple animation for my webpage, but I'm having some trouble getting it to work the way I want.

You can check out my page at . What I'm trying to achieve is having each image appear at its final position and animate one by one, rather than all at once.

Below is the code I'm using:

HTML

<div class="left">
            <span class="name">
                <a href="index.php"><img class="menu" src="name.png"/></a>
            </span>
            <span class="img">
                <img src="actions/p30.jpg"  onclick="Click(this)"/>
            </span>
        </div>

        <div class="middle">
            <span class="img">
                <img src="actions/p1.jpg"  onclick="Click(this)"/>
            </span>
            <span class="img">
                <img src="actions/p4.jpg"  onclick="Click(this)"/>
            </span>
        </div>

        <div class="right">
            <span class="img">
                <img src="actions/p5.jpg"  onclick="Click(this)"/>
            </span>
            <span class="img">
                <img src="actions/p6.jpg"  onclick="Click(this)"/>
            </span>
        </div>

CSS

    .left, .middle, .right{
    /*max-width: 35%;*/
    min-width: 30%;
    position: relative;
    float: left;
    top: 2.5em;
    margin-right: 2px;
    margin-bottom: 35px;
}

.left{
    left: 0;
}

.middle{
    left: 300;
}

.right{
    left: 600;
}

.img {
    position: relative;
    opacity: 0;
    margin: auto;
    max-width: 0;
    -webkit-transition: all 1.5s ease-out; 
    -moz-transition: all 1.5s ease-out; 
    -ms-transition: all 1.5s ease-out; 
    -o-transition: all 1.5s ease-out; 
    transition: all 1.5s ease-out;
    margin-top: -0.5em;
}

JS

jQuery.fn.reverse = [].reverse;

$(function () {
    var delay = 300;
    $('.right, .middle, .left').each(function () {
        var imgs = $('.img'),
            iLen = imgs.length;

        imgs.each(function () {
            var c = $(this), 
                h = c.height();

            delay += 10;
            setTimeout(function () {
                c.css('max-width', '100%');
                c.css('opacity', '1');
            }, delay);

        });
    });
});

Can anyone offer some assistance with this?

Answer №1

If you want to add animation effects to multiple images, you can loop through each image and animate them with a specific delay based on the animationspeed * count.

To achieve this, you can use the following JavaScript code:

var animationspeed = 300;
var count = 0;

$('.animate_image').shuffle().each( function() {
  $(this).delay(animationspeed * count).animate({ }, animationspeed);
  count+=1;
});

(function($){
 
$.fn.shuffle = function() {
 
    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });
 
    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });
 
    return $(shuffled);
 
};
 
})(jQuery);
.animate_image {
  opacity: 0.0;
}

Make sure to replace 'img' selector with a class selector like '.animate_image' and add this class to each image you want to animate.

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

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

I need to enable users to edit information in a table. One cell in the table contains text. Here is an excerpt from the table: <table class="table table-striped table-hover" id="table_id"> <thead> <tr> <th>Event</th& ...

Using a dashed border stroke creates a unique look when combined with border-radius properties

I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success. For example, I explored this resource Unfortunately, the issue arises when I incorpor ...

Loading data into a text field using JQuery, AJAX, and PHP when a checkbox is clicked

Is there a way to automatically populate text fields with data when a checkbox is clicked, and then disable the field? And if the checkbox is unchecked, remove the data and enable the text field for manual input. I have attempted to implement this using ...

CSS: Placing items within an ng-for loop utilizing the "fixed" position property

<ul class="nav nav-pills nav-stacked" style="list-style: none"> <li *ngFor="#el of dragZoneElems; #idx = index"> <h4 style="position: fixed; top:'idx'*10" [dragResponder]="el">{{el.first}} {{el.last}}</h4& ...

Unable to retrieve value - angularJS

An AngularJS application has been developed to dynamically display specific values in an HTML table. The table consists of six columns, where three (Work Name, Team Name, Place Name) are fixed statically, and the remaining three columns (Service One, Servi ...

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

I am in the process of creating my own portfolio to showcase my work. I have implemented a feature where clicking on an image opens up a Bootstrap carousel. However, I'm facing an issue where the carousel doesn't always start with the first imag ...

What is the best way to extract "true" values from an array and store them in a new array during iteration?

I am currently enrolled in a Codecademy course and I am facing a roadblock. My main goal is to gain a solid grasp of JavaScript. The current task at hand is as follows: "There is an array of unnecessary words. Your goal is to iterate over the array and fi ...

What is the process for publishing HTML webpages using IIS?

After successfully developing several webpages, I am now ready to deploy them on my localhost. But how exactly can I go about this process? I attempted to create a virtual directory and transferred the HTML pages, CSS, JS, and images into it. Unfortunatel ...

Can you utilize the dotenv EJS file effectively?

I'm just starting out with Nodejs, so if I've made any mistakes, please let me know how to fix them... In my situation, I've stored all the credentials in a .env file and my index.ejs is attempting to extract this data. However, I encounter ...

What is the process for linking to a backend on a distinct port in Next.js?

I am working on a project with Next.js and I am facing a challenge in connecting to a backend server that is running on a different port. The frontend of my application is on port 3000, while the backend is on port 8000. My goal is to interact with the bac ...

Can one showcase a php content using an ajax event?

I’m having trouble asking the right question because I’m not sure what I’m doing. I have a form that includes a default PHP script that creates three different lines: <form method="GET" name="NewDeliveryNote" action="ItemPosts_INSERT.php"> < ...

What causes nodejs to exit prematurely without running all the code?

When running the code provided, it randomly prints "DONE" or not. Can you explain why this happens? How can I ensure that it always reaches the console.log("DONE"); line every time? const {Worker, isMainThread, parentPort} = require('node:worker_threa ...

Labels can sometimes cause text input fields to become unresponsive

I've encountered a bug while working on my website with the materializecss framework. Sometimes, inputs are not responding correctly. This issue seems to occur when clicking on the first input and accidentally targeting the higher part of the second ...

Tips for inserting a value into a specific location within an array using JavaScript

I am working with an array of objects that looks like this: const array = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ]; My task is to add a new entry to this array, but it needs to be inserted at a specific position. For instance, when adding { ...

The HTML body content of an iframe

Hey there, I'm trying to get just the body html from an iframe using my code. Currently it returns all the html of the iframe. Does anyone have any ideas on how to modify this? Here's the code snippet: alert( $("#uploaderIframe").contents()[0]. ...

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

Using C# Razor Pages to send checkbox values via AJAX requests

In my model class, I have the following: public class DataModel { public bool Display { get; set; } } After deserializing a FormData object to a JSON object, I am posting the value from a checkbox like this: this.FormToJSON = form => { const ...

Adding dropdown values to text area

I'm encountering a simple issue. My goal is to allow users to select values from a dropdown menu and have those values added to a text area. Additionally, users should be able to input extra content in the text area. Here's what I want: the user ...

Verifying the selection state of a dynamically generated checkbox with JavaScript

I have a table with checkboxes. Each time a button is clicked, I dynamically add new checkboxes to the table like so: var cell3 = row.insertCell(2); cell3.innerHTML = '<input type="checkBox" value=\"selected?\" style="cursor:poin ...

Stop flexbox list items from altering the width of their parent container when the children are hovered over

In my project, I am dealing with a series of list items where some have child lists containing sub navigation links. To create a hover effect using CSS, I set display: none on the child <ul> and then change it to display: block when hovering over the ...