69035

jQuery Animate transform infinite

I need to set infinite rotating but it doesn't work.

function AnimateRotate(angle) { var $elem = $('.icon-repeat'); $({deg: 0}).animate({deg: angle}, { duration: 5000, step: function(now) { $elem.css({ transform: 'rotate(' + now + 'deg) infinite' }); } }); }

That is my code, and this line <strong>transform: 'rotate(' + now + 'deg) infinite'</strong> .. if I remove <strong>infinite</strong> it works for one rotate, but I need to rotate infinite.. I have to write it in JS, I think...

Answer1:

Try this, You should set the "repeat" value. AnimateRotate(degree, repeatcount).

In your case set the repeatcount as "<strong>infinite</strong>".

function AnimateRotate(angle,repeat) { var duration= 1000; setTimeout(function() { if(repeat && repeat == "infinite") { AnimateRotate(angle,repeat); } else if ( repeat && repeat > 1) { AnimateRotate(angle, repeat-1); } },duration) var $elem = $('.icon-repeat'); $({deg: 0}).animate({deg: angle}, { duration: duration, step: function(now) { $elem.css({ 'transform': 'rotate('+ now +'deg)' }); } }); } AnimateRotate(45,"infinite");

Here the demo

Answer2:

Here goes another answer, one that uses the complete callback of the animate() function instead of setInterval(), and that can be canceled:

function rotateForEver($elem, rotator) {
    if (rotator === void(0)) {
        rotator = $({deg: 0});
    } else {
        rotator.get(0).deg = 0;
    }

    return rotator.animate(
        {deg: 360},
        {
            duration: 5000,
            easing: 'linear',
            step: function(now){
                $elem.css({transform: 'rotate(' + now + 'deg)'});
            },
            complete: function(){
                rotateForEver($elem, rotator);
            },
        }
    );
}


You would then use it like this:

$(function() {
    var $rotator = rotateForEver($('.icon-repeat'));
    $('#some-button-to-cancel').click(function() {
        $rotator.stop();
    });
});

    

Answer3:

You can wrap it with setInterval():

function AnimateRotate(angle) { var $elem = $('.icon-repeat'); setInterval(function(){ $({deg: 0}).animate({deg: angle}, { duration: 5000, step: function(now) { $elem.css({ transform: 'rotate(' + now + 'deg) infinite' }); } }); } }

and call it like:

AnimateRotate(360);

Updated demo as suggested by bemol.

Recommend

  • React Native: Native Android UI component with JWPlayer shows no video image
  • How can I rotate a UIViewController to its supported interface orientation when navigating to it?
  • Creating a table in “MSWord” document out of a text in a .txt file
  • Horner's rule in C++
  • How to draw cross background via css which is responsive
  • Which way to go with graphic-intense multi-touch app, XNA or WPF?
  • Show direction of linestring on map - auto zoom on map
  • SQL Stored Procedure - variable too short
  • Implicit property animations do not work with CAReplicatorLayer?
  • Change the width of the JQM panels
  • jQueryUI dialog replacement for confirm?
  • What's a fast (non-loop) way to apply a dict to a ndarray (meaning use elements as keys and rep
  • segue from landscape only to portrait only
  • Are there “Dynamic Playlists” of unit tests in Visual Studio?
  • Appium MobileElement swipe returns unknown server error
  • Debugging VB6 Code From Visual Studio 2010
  • Diff between two dataframes in pandas
  • Adjust width of select element according to selected option's width
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • Email format validation in mvc3 view
  • Using $this when not in object context
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Array.prototype.includes - not transformed with babel
  • req.body is undefined - nodejs
  • How do I fake an specific browser client when using Java's Net library?
  • How reduce the height of an mschart by breaking up the y-axis
  • How to add date and time under each post in guestbook in google app engine
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Modifying destination and filename of gulp-svg-sprite
  • Perl system calls when running as another user using sudo
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • coudnt use logback because of log4j
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Change div Background jquery
  • How can I remove ASP.NET Designer.cs files?
  • java string with new operator and a literal