Clever Geek Handbook

Smooth jQuery animation

I have this animation that makes some buttons on the screen "beat". It works great except for one thing, the animation is too "sharp" and not smooth, how can I smooth it?

function myFunction() {
    setInterval(function () {
        tstFnc();
    }, 1000);
}

var flag = true;

function tstFnc() {
    var numM = Math.floor((Math.random() * 10) + 1);
    var stringM = '#mgf_main' + numM + ' img';

    $(stringM).animate({
        width: '80px',
        height: '80px'
    }, 150, function () {
        $(stringM).animate({
            width: '68px',
            height: '68px'
        }, 150, function () {
            // nothing
        });
    });
};
0


source to share


2 answers


You can set the easing property for animation parameters.

http://api.jquery.com/animate/



http://easings.net/

+2


source


Try this here, animatethis is a function and the target is the id of the element and the speed is up to you .. and marginleft is an example, you should try your code.



function animatethis(targetElement, speed) {
    $(targetElement).animate({ width: "+=10px", height: "+=10px"},
          {
              duration: speed,
              complete: function () {
                  targetElement.animate({width: "+=10px", height: "+=10px" },
                  {
                      duration: speed,
                      complete: function () {
                          animatethis(targetElement, speed);
                      }
                  });
              }
          });
}
0


source






More articles:


All Articles