jQuery - rotate issues

Tell us what’s happening:
I’m trying to get this line to rotate 540 degrees with jQuery. I have managed to get it to get a ball to look like it is rolling but can’t quite seem to get this to work. on load page or on button. It needs to be animated so i can see the rotation. any help would be appreciated

ball and line (codepen.io)

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37

Challenge: jQuery - Use jQuery to Modify the Entire Page

Link to the challenge:

You didn’t close the ready function, you are missing an extra set of }) at the end.

I’ve just added that in thank you. still doesn’t work though

Why did you change the CSS?

You had this before

var rotateLine = 0;

$(document).ready(function () {
  $("#ball-button").click(function () {
    rotateLine += 540;
    $("#ball-line").css({ transform: "rotate(" + rotateLine + "deg" });
  });
});

rotate is a function.


Edit: I’m not really sure what you are trying to do with the CSS? Here is an example with a box and a 45deg rotation.

<div class="box"></div>
<button id="rotate">Rotate</button>
.box {
  background: limegreen;
  height: 80px;
  width: 80px;
  margin-bottom: 2rem;
}
let rotateBox = 0;

$(document).ready(function () {
  $("#rotate").click(function () {
    rotateBox += 45
    $(".box").css({ transform: `rotate(${rotateBox}deg)` });
  });
});

because it wasn’t working. It’s kind of working now but not the way it should. It’s the line i want to rotate on the button click not the button itself. and around the axis of one end of the line

When rotating do the objects always need a parent or other object to rotate around?

You can look at transform-origin

Edit: BTW, you did close the ball-line-dot element

I thought it was rotating around nothing for a second.
I’m trying to get the line to visibly rotate/spin 540 deg before reaching the resting position at the top of the page after all the fade-outs

This page has been altered as it’s a test page but it shows the base of what i’m trying to achieve

ball rolling (codepen.io)

Thanks no i didnt close this.

It’s okay I think i’m being way too ambitous for a newbie coder

is there a reason why this doesn’t work
$(“#ball-line”).animate({transform: “rotate”( “540deg”)});

but this does
$(‘#i-inspire’).delay(10000).animate({“marginTop”: “-=10px”});

You can’t use animate with non-numeric values.

https://api.jquery.com/animate/

There are some hacky solutions (and other suggestions).

I would suggest using CSS transitions or animations, likely with classes you can toggle on and off.

Or Web Animations API