jquery animate() problem (syntax ?)

Question

$('#somediv').stop(false, true)
             .animate({marginLeft: '-=' + e.width() + 'px'}, options.speed, function(){ options.onNewSlide() })

• e.with() returns 640
• options.speed contains 800
• options.onNewSlide() contains a a custom callback function

It works fine in Firefox. But i debugged it with jQuery-Lint because it was throwing some random error in IE. Lint tells me:

When I called animate(...) with your args, an error was thrown! TypeError: c.speed is not a function { message="c.speed is not a function",  more...}
You passed:  [Object {  marginLeft="-=640px"}, 800, function()]

and it indicates me the line i have posted. I have checked the jQuery doc, but my syntax seams ok.

Do you know what I am doing wrong?

PS: I use jQuery 1.4.2 from the Google API you can see the error here: http://meodai.ch/slider/ (I know the code is under construction, but still)

edit: I have tried to reproduce my error in a new file with just the animation: http://meodai.ch/slider/index2.html there it works very well! Now I am lost.

Answer 1

In your code you have:

options = $.extend(defaultOptions, options)

When options is undefined, this extends the jQuery object with the properties from defaultOptions.

Within defaultOptions are speed and easing properties, which overwrite jQuery's internal properties of the same names, causing the error.

A safer way to combine defaultOptions and options would be:

options = $.extend({}, defaultOptions, options);

Answer 2

I have made an object options for my params. inside the option object i had speed: and easing: as soon as i renamed that options my problem was solved. But how does it comes that i don't have the same problem on my other test page?

Answer 3

One thing that I see is that you are not specifying the easing function to use. Try

$('#somediv')
  .stop(false, true)
  .animate({marginLeft: '-=' + e.width() + 'px'}, 
    options.speed, 
    'linear',
    function(){ options.onNewSlide() })