I would like to smooth the chaining of some jquery.animate functions.
Here is a jsfiddle where I describe the problem : /
As you can see, there is a stop between each animation, even with the linear attribute.
Do you have any idea about how to smooth it? Or anything else that would do the trick?
Regards
I would like to smooth the chaining of some jquery.animate functions.
Here is a jsfiddle where I describe the problem : http://jsfiddle/xavier_seignard/KTxbb/4/
As you can see, there is a stop between each animation, even with the linear attribute.
Do you have any idea about how to smooth it? Or anything else that would do the trick?
Regards
Share Improve this question asked Sep 17, 2012 at 11:27 xavier.seignardxavier.seignard 11.2k14 gold badges55 silver badges77 bronze badges 8- On fx 15/Mac I cannot see any stop between animation... you could observe this setting a duration of 2/3000 milliseconds – Fabrizio Calderan Commented Sep 17, 2012 at 11:30
- 1 does anyone else see rendering problems with that fiddle? With Chrome 21.0.1180.89 on MacOS X I see streaks left behind. I've seen similar in my own code but hadn't been able to isolate it to a reportable test cast. – Alnitak Commented Sep 17, 2012 at 11:31
- @Alnitak that's from you Video card – Mihai Iorga Commented Sep 17, 2012 at 11:31
- @MihaiIorga on my app it only started happening around Chrome 18, but I wasn't able to isolate it. It happens on other cards on other Macs too. – Alnitak Commented Sep 17, 2012 at 11:32
- @Alnitak , I've the same issue (chome 21/MacOs X) – Fabrizio Calderan Commented Sep 17, 2012 at 11:32
4 Answers
Reset to default 4You can change the speed for a more "fine" animation, you see that stop because the speed it's too fast and different size to cover:
function initPage() {
$.each(json, function() {
$("#point").animate({
left: this.x,
top: this.y
},
1000, 'linear');
});
}
I think you should just try out the jQuery Easing plugin - http://gsgd.co.uk/sandbox/jquery/easing/
Include the file and instead of "liner" add some other easing.
Is it the change in speed that you're describing?
That is because the animations have the same timings but the distance the square box is covering differs. You might need to alter the time for each animation dependant in the distance travelled.
Thats the problem with jsfiddle.. I tested your jsfiddle link and it was not looking great as you mentioned in your question.
But then I created new page on my pc and copied everything from your fiddle and checked it. It looks alright.
Copy and paste this and save it as html and test it :
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell/css/normalize.css">
<style type="text/css">
#point {
position: absolute;
background-color: black;
width: 15px;
height: 15px
}
</style>
</head>
<body onload="initPage()">
<div class="start" id="point"></div>
<script type="text/javascript">
var json = [
{'x' : '300' , 'y' : '200'},
{'x' : '250' , 'y' : '150'},
{'x' : '209' , 'y' : '387'},
{'x' : '217' , 'y' : '323'},
{'x' : '261' , 'y' : '278'},
{'x' : '329' , 'y' : '269'},
{'x' : '406' , 'y' : '295'}
];
function initPage() {
$.each(json, function() {
$("#point").animate({
left: this.x,
top: this.y
},
"linear");
});
}
</script>
</body>
</html>