To achieve smooth animation using `animate` and `transform`, you need to utilize the `step` function in jQuery's animate method. Here is a sample code demonstrating this:
$('.animate').animate({
'opacity': '320'
}, {
step: function (now, fx) {
$(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
},
duration: 10000,
easing: 'linear',
queue: false,
complete: function () {
alert('Animation is done');
}
}, 'linear');
One common mistake is setting the value directly in the `step` function instead of updating it incrementally. This can be resolved by splitting the functionality into two separate functions and utilizing CSS rules creatively to control values throughout the animation. Also, ensure that the queue is set to false for simultaneous execution of animations.
You can enhance the code further like this:
$('.animate').animate({
'opacity': '320'
}, {
step: function (now, fx) {
$(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
},
duration: 10000,
easing: 'linear',
queue: false,
complete: function () {
alert('Animation is done');
}
}, 'linear');
$(".animate").animate({ textIndent: 100 }, {
duration : 10000,
easing: 'linear',
queue: false
});
For a working example, refer to this fiddle:
http://jsfiddle.net/Hive7/1qu2qxqh/