Attempting to create an animation that involves rotation

I have been working on this issue for a while now but haven't made any progress. I am not seeing any errors in the console and the div is not rotating as expected. http://jsfiddle.net/B8shT/

window.i = 10000;
function dothetwist()
{
    $('#box').animate( {
        step: function(now,fx) {
            $(this).css('-webkit-transform','rotatey('+now+'deg)');
        },
        duration: window.i,
        complete: function() {
            window.i=window.i-1000;
            dothetwist();
        }
    });       
}

Can anyone help me figure out what I'm missing?

jqueryhtmlcss

Answer №1

Looks like this could be exactly what you're looking for. Check out the JSFIDDLE here

window.i = 10000;

function dothetwist() {
  $( "#box" ).animate({
      rotate: 1000
  }, {
       step: function(now,fx) {
            $(this).css('-webkit-transform','rotate('+now+'deg)');
        },
    duration: window.i,
    complete: function() {
         window.i=window.i-1000;
            dothetwist();
    }
  });
}

$("#box").click(function() {
dothetwist();
});

Tip: You have control over the speed of rotation by adjusting the value of "rotate: 1000".

A big thank you to @nnnnnn for pointing me in the right direction.

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

Hover Effects without Continuous Looping Videos

I've successfully created a div with a video as the background, however, the video is only visible when hovering over the div. Everything is functioning correctly and here is the CSS code I'm using: .row .col .background-inner{ background:u ...

csshtmlvideohover

Modifying the display property of an element using JavaScript

Hello, I'm encountering an issue with a section of my javascript code. I am attempting to make the #showAddress element display as block when the deliverservice radio button is clicked or checked. I have tried searching for solutions on Stack Overflow ...

javascripthtmlcss

Update selection of dropdown menu upon clicking an image

Is there a way to update the select option value by clicking on an image? I have a dropdown list filled with dates from a database as well as two images, one for moving left and the other for moving right. When the left image is clicked, I want to show the ...

phpjavascriptjquerysql

Error: Trying to prepare a statement on an invalid PDO object in PHP

I'm facing an issue while attempting to execute a query using database credentials from a configuration file. I keep encountering the error message: Uncaught Error: Call to a member function prepare() on null This is my config.php file: $host = &apo ...

phphtmlmysqlpdo

Generating HTML code in Java to incorporate a background image

After creating an HTML string, I find myself needing to assign a background image. protected void onPostExecute(HashMap<String,String> hPlaceDetails){ String backgroundImage = ?????? String name = ...

javaandroidhtml

The sliding function of the Bootstrap slider appears to be malfunctioning

I'm having trouble getting my slider to work with the Bootstrap carousel. No matter what I do, the images don't slide when I click on the button. After trying out several other Bootstrap sliders, I encountered the same issue. I searched for solu ...

htmlcssbootstrap-4

What is the proper way to utilize Vue and Buefy Tab components?

I'm currently designing a Vue page that includes the Buefy b-tab element. My request is quite simple, as outlined below: The page consists of a Buefy Tab element and a button. https://i.sstatic.net/TkiVYfJj.png Upon clicking the tick button, it sho ...

javascriptcssvue.jsbuefy

Is a Circular Logo Aligned in the Middle of the Navigation Bar?

Just starting out with bootstrap and looking to design a unique navbar with a round logo in the center: https://i.sstatic.net/whLUr.png Finding it a bit tricky, I searched for similar solutions and came across this one. However, implementing that navbar d ...

cssbootstrap-4

Showing a Div after a designated time of page loading: A simple guide

While I have a good understanding of CSS, Javascript is still new territory for me. I could use some guidance on the following task. My goal is to display a fixed div at the bottom of the screen, but I only want it to appear after a specific delay, say 10 ...

javascriptjqueryhtmlcss

Tips for building a form that allows for list submissions

I am working on creating a form where users can input a list of 1-10 items. Subsequently, they will be prompted to provide an explanation (in a text box) for each item on the list. However, I am facing challenges in implementing this dynamically. For a si ...

javascriptjqueryhtmlcssforms

JavaScript unexpectedly populating array with unnecessary empty objects

During my attempt to create a calculator, I encountered an error while testing. After entering a number and selecting one of the operation buttons, I ran a console.log test and discovered 3 extra arrays lingering without purpose. You can find the JSFiddle ...

javascripthtmlarrays

Tips on utilizing commas as text input within an HTML input array

Is there a way to pass a comma in an input field to the server using input arrays? The server currently receives comma-separated input values from an array of inputs, which causes it to consider any commas within the input as separators. For example: HTM ...

c#jqueryhtmlasp.net

Is it possible to refresh the page without using a hashtag and stay on the same page in AngularJS

Is it possible to refresh my view from the navigation bar without displaying the server folder? I have the html5Mode activated: if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); } ...

javascriptjqueryangularjshtml

Positioning Horizontal Drop Down Menus in CSS

Hello everyone! I am currently working on creating a horizontal dropdown menu. I have created a JS Fiddle to showcase my issue along with an image of the desired outcome. The problem I am facing is that I cannot get the submenu to align where I want it (o ...

jqueryhtmlcss

@media query not functioning properly with certain rules

I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules. For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. How ...

htmlcssmedia

Discrepancies in Video Element Size: Mobile Versus Desktop

Why does the video element have different sizing behavior between mobile and desktop? I noticed on this website that on desktop Chrome, its width is about 35% of the browser while on iPad Chrome it's only about 10% Does anyone know why this is happen ...

csshtmlhtml5-video

The Modelform is throwing an error because it cannot iterate over a boolean object

Looking for some help with saving a boolean field in a Django model form. I keep encountering a type error 'bool' object is not iterable and I'm struggling to understand why. I initially thought that Django handled the fact that boolean valu ...

pythonhtmldjango

Having troubles with the rendering of views and layouts in FlightPHP Framework

I have recently started using FlightPHP for a small website project. My approach involves utilizing views and layouts to render the various web pages: <?php require 'flight/Flight.php'; Flight::route('/', function(){ ...

phphtmlflightphp

What methods are available for employing conditions in HTML attributes?

I need to implement a functionality in Angular where an image is loaded in a new window when the user clicks a button. The popup window will contain HTML content. Here's the Angular code snippet: <button class="btn btn-primary" type=&quo ...

javascripthtmlangular

Saving a JSON object to a JSON file

My code successfully utilizes the following structure: $.getJSON('Json_users_templates/SO_example.json', function(data) { }); to retrieve JSON data from a local .json file into an object. Now, I am looking for some code that will allow me to s ...

jqueryajaxjson