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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.