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
Dim
source
to share
2 answers
You can set the easing property for animation parameters.
http://api.jquery.com/animate/
http://easings.net/
+2
Bart
source
to share
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
SS Rawat
source
to share