Utilize the Step Function in Jquery to create animated rotation at a specific degree angle

I have a div that is currently rotated at -35 degrees (as set in the CSS file). I would like to be able to click on it so that it rotates back to 0 degrees.

Here is the code from my Javascript file:

$("div#words").on("click",function(e){
    $(this).animate({
        "height":"200",
        "border-radius":"200"
        },{duration:500,step:function(now,fx){
            $(this).css("-ms-transform","rotate("+now+"deg)");
            $(this).css("-webkit-transform","rotate("+now+"deg)");
            $(this).css("transform","rotate("+now+"deg)");

            }},function(e){
                });
});

Currently, the rotation is about 180 degrees. How can I specify the rotation to a certain degree?

javascriptjquerycssrotation

Answer №1

This question always has a response
Rotating a div with JQuery

JavaScript Code:

$("div#words").on("click",function(e){
$(this).animate({
        "height":"200",
        "border-radius":"200"
        },{duration:500,step:function(now,fx){
            $(this).addClass('box_rotate');
            }},function(e){
                });
});

CSS Style:

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
        -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 */
         transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}

To achieve this effect, simply add a class and define the styling. It's a straightforward approach to rotation.

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

"Customize your jQuery Ajax request to ensure a clean cache by refreshing data

Seeking a solution for no-cached ajax requests due to issues with cached responses. Modifying the original code from a plugin is not an option, so I require a stable solution to address this problem. I attempted the following code: jQuery.ajaxSetup({ c ...

phpjqueryajaxwordpressjquery-ui

JavaScript -Error: Unable to access the 'children' property as it is undefined

I'm currently working on creating a tree and calculating its height. The map array is properly initialized within the for loop, but when I run console.log(map+" this is map");, it displays [object Object],[object Object],[object Object],[object Objec ...

javascriptnode.jsdata-structurestree

Utilize regular expressions to substitute a specific string of text with an HTML tag

My task is to transform this text: let text = "#Jim, Start editing to see some magic happen!"; into this format: text = "<span style="color:red">#Jim</span>, Start editing to see some magic happen!"; Here is my ...

javascripthtmlreactjstypescript

what is the significance of the number THREE in the context of Three.js?

Can you explain the significance of "THREE" in three.js? When we are creating a scene or any object, we typically use names like new THREE.Scene() or new THREE.WebGLRenderer(). What is the meaning behind the term "THREE" in this context? ...

javascriptthree.js

Passing $index variable from a bootstrap modal window does not work in AngularJS

I'm running into a wall here. My issue involves using ng-repeat to populate a table with two buttons in each row - one for updating the row content and another for uploading files. The upload button triggers a bootstrap modal window where users can se ...

javascriptjqueryhtmlangularjstwitter-bootstrap

What could be causing my Angular JS application to malfunction?

Presenting myFirstAngularApp.html <html ng-app="store"><!-- The "ng-app" attribute initializes an Angular app. Everything inside this tag is considered part of the Angular app due to ng-app --> <head> <link rel="stylesheet" type= ...

javascriptangularjshtmldebugging

What is the significance of property placement in a Mongo query: at the beginning versus at the

Currently, I am in the process of creating a query to retrieve data from the mango collection. Interestingly, I have written the same query in two different ways. Here is my working query: db.getCollection('routes').find({"routes.routeId": "r1q ...

javascriptarraysnode.jsmongodbexpress

Creating an HTML layout or template directly within a JavaScript bookmarklet

Currently, I am using a bookmarklet that generates a user interface for interaction. The method I have been using involves creating elements using $('<element>').addClass().css({..});, but this approach is proving to be difficult to maintai ...

javascripthtmltemplate-enginebookmarklet

Issue with displaying a vTable component in VueJS / Vuetify

I am struggling with this basic HTML/Vue/Vuetify code snippet below, and I can't seem to get it functioning as intended. const { createApp, computed, ref, reactive } = Vue; const { createVuetify } = Vuetify; const ...

javascriptvue.jsvuetify.js

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

javascripthtmlcheckbox

What is the best way to store data retrieved using a model.find({}) operation?

I am currently attempting to calculate the average value of a collection in my database using Mongoose and Express. The objective is to utilize this calculated value on the "calculator" page when rendering, which is why it is embedded in a post for that sp ...

javascriptnode.jsmongodbexpressmongoose

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

javascripthtmlvue.js

Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...

cssangular

Can SeleniumWebdrive shift its focus to an element while utilizing jQuery for element location?

Context: After using Selenium 2.0 (WebDriver) for a while, I've learned that it focuses on elements when locating them, as shown below: var element = driver.FindElement(By.CssSelector("#foo")); element.Click(); I've also discovered the amazing ...

c#jquerywebdriverselenium-webdriver

State not properly updating in the most recent version of Next.js

"use client"; import { useState , useEffect } from "react"; import React from 'react' function form() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [disable, ...

javascriptreactjsnext.js

Container with adjacent gradient CSS shape

I am currently working on a unique design concept for a website we are developing. The header requires a parallelogram shape above it and a trapezium shape to the right of the container, as illustrated below. Successfully implementing the parallelogram ab ...

htmlcssbootstrap-4linear-gradients

Error: Invariant violation caught - rendering of additional hooks compared to previous render

One of my components has a simple structure like this: const component = (props: PropTypes) => { const [allResultsVisible, setAllResultsVisible] = useState(false); const renderResults = () => { return ( <section> ...

javascriptreactjsreact-hooks

"Utilizing flex-box to create a hover effect for child elements

I am attempting to create a grid caret with a top and bottom caret that displays a grey area when the user hovers over each side. <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div&g ...

htmlcssflexbox

Utilizing jQuery to submit the form

After clicking the search icon, it displays an alert with the message ok, but not h. Based on the code snippet below, it is intended to display alerts for both ok and h. <?php if(isset($_POST['search'])){ echo "<script type='text/ ...

javascriptjqueryclick

Displaying Data in a Table

In my current setup, I have a table that receives data from a form through JavaScript. The code is as follows: <div class="row"> <div class="span*"> <table id="production" class="table table-bordered" style="margin:10px auto;bor ...

javascripthtml