Animate the expansion and shrinkage of a div instantly using jQuery

I am trying to create an animation effect using jQuery animate on a div element where it starts large and then becomes smaller. Here is the code I have written:

$(this).animate({
    opacity: 0,
    top: "-=100",
    width: "38px",
    height: "32px"
}, 1500, function () {
    $this.remove()
})

However, with this code, the large div does not shrink as intended. How can I modify the code to first make the div larger and then immediately smaller? If there is a way to achieve this using CSS3 instead, I would appreciate any guidance on how to do it in CSS3.

Thank you for your help.

Answer №1

Utilizing CSS3 animations and the transform: scale(); property allows you to achieve this effect:

@-webkit-keyframes grow
{
    0%{-webkit-transform:scale(1);}
    50%{-webkit-transform:scale(2);}
    100%{-webkit-transform:scale(1);}
}
@-moz-keyframes grow
{
    0%{-moz-transform:scale(1);}
    50%{-moz-transform:scale(2);}
    100%{-moz-transform:scale(1);}
}
@-ms-keyframes grow
{
    0%{-ms-transform:scale(1);}
    50%{-ms-transform:scale(2);}
    100%{-ms-transform:scale(1);}
}
#spin{
    position:absolute;
    top:10%;
    left:10%;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: grow;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: grow;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

Check out this fiddle for a live demo

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

Split into two lines, the Bootstrap carousel includes 28 indicators for easy navigation

I am currently using a Bootstrap 4 carousel with 28 pictures. However, I am facing an issue where the indicators on small and medium devices are not displaying properly (some indicators seem to be missing). They are not breaking into new lines as expected. ...

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

What are some creative ways to customize the background of a MaterialUI modal design?

I am currently facing an issue with my MUI Modal setup. The backdrop is displaying as black even though I have proper styling in place. No matter what I do, the backdrop remains pitch black and does not update. Below is the code snippet along with a scree ...

What is the best way to access the local Express server that is located in the same directory as the frontend project

This is the structure of my project - backend > node_modules > .env package-lock.json package.json server.js frontend > index.html style.css script.js server.js import dotenv from 'dotenv'; dotenv.config(); import express from &apo ...

Explore by the anchor tag

I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...

The `finally` function in promises is failing to execute properly

Currently working with Typescript and I've included import 'promise.prototype.finally' at the beginning of my index.js file (in fact, I've added it in multiple places). Whenever I try to use a promise, I encounter the error message say ...

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

Tips on adding background images to your chart's background

Is there a way to set an image as the background in Lightning Chart using chartXY.setChartBackground? ...

Significant contrast in how text is displayed between Chrome and Firefox

Experiencing significant discrepancies in text rendering between Chrome and Firefox. Chrome appears to apply anti-aliasing rules that reduce the text size considerably. Attempts have been made to adjust -webkit-font-smoothing, letter-spacing and word-spac ...

What is the best way to convert the information from a <SelectInput /> component or similar components into another language?

Within my React admin v3 application, When retrieving data from the servers for my entity, I receive a unique identifier called a slug. This slug is a special key that needs to be translated on the client side. Here is an example of my <CallMeBackCre ...

Leveraging Javascript Modules within a Typescript Vue Application

The issue at hand I've encountered a problem while attempting to integrate https://github.com/moonwave99/fretboard.js into my Vue project. My initial approach involved importing the module into a component as shown below: <template> <div&g ...

It appears that React is not successfully transferring props to another component

Recently, I decided to follow a tutorial on creating a React application. However, I encountered a peculiar issue that has left me scratching my head. The problem arises when I attempt to pass data from one component to another. Despite successfully passi ...

Observing the CSS class of an input element during async validation does not yield the desired results

Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

Tips for troubleshooting ImageArray loading issues in AngularJS

Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...

Error: Attempting to access an undefined property

I have a quite extensive Vue/Vuitify project that is not functioning correctly. I have simplified the project down to a small program to highlight the issue. Despite trying everything that comes to mind, and even some things that don't, I am unable to ...

What is the best way to make the first <p> tags bold within an array?

I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". <div v-for="item in first" :key="item.id"> <p class="cat_name" >{{ ...

When using the Ng --version command on a development package, it throws an error

I encounter an error with a development package when cloning a repository. I would greatly appreciate any advice on how to resolve this issue. https://i.stack.imgur.com/DBp5r.png ...

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...