Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

I am attempting to utilize jquery in order to bring a constantly rotating div (with CSS animation) to a gradual, smooth halt when another div is clicked.

My current strategy involves changing the "animation-timing-function" property from "linear" to "ease-out", but it seems to abruptly stop rather than the slow stop I desire.

HTML

<div id=click>Click me</div>
<div id=spinner></div>

jQuery

$(function () {
$("#click").click(

function () {
    document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['animation-iteration-count'] = '1';
    document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';

});
});

CSS

#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;

animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-moz-keyframes spin-constant {
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin-constant {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-constant {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(36 0deg);
}
}

You can find a demonstration of this concept on JSFiddle here: http://jsfiddle.net/jN5vw/1/

Answer №1

Check out this alternative solution:

Demo Here

JavaScript:

$('#button').click(function () {

    $("#loading").removeClass('loading');
    $("#loading").addClass('animate');
});

CSS:

.animate{
    width:50px;
    height:50px;
    margin:20px;
    background-color:green;
    animation:spin 5s ;
    -webkit-animation: spin 1s linear;
    -webkit-animation-iteration-count:1;
}

This should address your query.

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

Creating HTML or PHP pages using jQuery

Is it possible to generate a file using jQuery? I am creating a website maker. On the left side, I have a list of elements such as: ---------------------------------------------------------------- Elements Attri ...

What is the best way to adjust the size of carousel images within a box element?

How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...

Sorting information in the React Native Section List

Working with React Native's SectionList and filtering data: data: [ { title: "Asia", data: ["Taj Mahal", "Great Wall of China", "Petra"] }, { title: "South America", data: ["Machu Picchu", "Christ the Redeemer", "C ...

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

Updating a function in jQuery UI after dynamically loading content through AJAX

I've been on a quest for days now, searching high and low for an answer to my dilemma. While I've managed to solve most of the issues that arose after adding AJAX calls to my code, there's one piece that still eludes me. Just to provide som ...

How can I activate the copy function in jQuery?

I'm trying to figure out how to initiate a copy event using JavaScript or jQuery. I need to be able to simulate the copy event by clicking on a button, but I haven't been able to find a solution yet. I want to avoid using ZeroClipboard or any oth ...

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...

Implementing Express 4: The Correct Way to Serve Routes from External Files

Something about my Express 4 application is causing me frustration. Here's the configuration: routes/profile.js var express = require('express'); var router = express.Router(); router.get('/profile', function(req, res) { res.s ...

enhancing the appearance of the initial sentence in the closing passage through CSS styling

Is there a way to make only the first sentence in the final paragraph bold using CSS? Specifically, I would like to add extra padding to the top of this last paragraph so that it wraps around an image. However, when I increase the bottom padding of the flo ...

What is the best way to determine the P/E ratio for a specific stock?

Need help with a formula calculation. I have the value for net worth, but I am having trouble iterating over the EPS values and multiplying them by the shares held. Can anyone suggest a solution? Thank you! You can find the Plunker here <div&g ...

What is the best way to retrigger an ajax request in jQuery after it encounters an error?

In my JavaScript code, I have an AJAX request that communicates with a Rails controller to send data. If the controller detects duplicate information already in the database, it returns an 'Unprocessable Entity' error. I am looking to implement ...

Issue with the statement not being recognized for counting the space bar

I created a counter but I'm having trouble incorporating if statements For example: if (hits == 1) {alert("hello world1")} if (hits == 2) {alert("hello world2")} if (hits == 3) {alert("hello world3")} if (hits == 4) {alert("hello world4")} This is t ...

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...

What sort of JavaScript WYSIWYG text editor provides formula support?

Looking for a Javascript rich text editor that offers formula selection in the toolbar. Any recommendations? ...

The user model cannot be assigned to the parameter of type Document or null in a mongoose with Typescript environment

While working with Typescript, I encountered an error related to mongoose. The issue arises from the fact that mongoose expects a promise of a mongoose document (in this case, the user's document) or "null" to be resolved during a search operation. Ho ...

What is the best way to remove jest from your system completely?

I've been trying to set up jest for testing react applications However, after installing it with yarn, I am encountering issues starting my react app in any way This error message keeps popping up, but the suggested solution didn't resolve it: ...

Using the HttpPut method in conjunction with a route controller

Hey there, I could really use some assistance. I'm currently attempting to utilize the PUT Method via AJAX in order to send data to a controller for an update operation. Here's my JavaScript and AJAX code: function UpdateProduct() { var id = loc ...