using .animate() - question regarding fluent animation

using .animate() - question regarding fluent animation

I have been reading the .animate() function and it is pretty much what I need, but the only problem is that, for example, the following code animates the div (which is what I want) but when the animation starts it starts slowly, then goes faster and then ends slowly again. I need it to be a fluent movement, always at the same speed (for example moving a div 50px to the left in 500 ms). I read something about using "easing: linear" in the options, but it didn't work. I also read on the API examples " This will only work if you have a plugin that provides this easing function", and I have no idea of what that means exactly. So what would I need to make it work?
  1. <style>
  2. .block {
  3.   position:absolute;
  4.   background-color:#abc;
  5.   left:50px;
  6.   width:90px;
  7.   height:90px;
  8.   margin:5px;
  9. }
  10. </style>
  11. <button id="left">&laquo;</button> <button id="right">&raquo;</button>
  12. <div class="block"></div>
  13. <script>
  14. $("#right").click(function(){
  15.   $(".block").animate({"left": "+=50px"}, { duration: 500 });
  16. });
  17. $("#left").click(function(){
  18.   $(".block").animate({"left": "-=50px"}, { duration: 500 });
  19. });
  20. </script>