0

I'm trying to run a simple bit of jQuery to animate a menu opening, this is the link of code in question:

$(this).find('.sub').show('{opacity:"show",height:"show",width:"show"}',500);

Edit: I should clarify that animate was not working either, this is the code I was using for that

$(this).find('.sub').animate({opacity:"show",height:"show",width:"show"},500);

(The animation is changeable, one of several picked by the user, although I doubt that's important)

every time it tries to run I get this error

Uncaught TypeError: Property '500' of object #<Object> is not a function

Now 500 is the speed, not the function callback but nothing I've tried makes it realize that. First, I tried passing some options (blank '' options) then I tried adding a function to the end (I used function(){alert('test')} as a simple test) and nothing worked.

If your interested in the outside code I can post it, although it's just the Mega Drop-downs system with a few tweaks (you can take a look at http://www.sohtanaka.com/web-design/examples/mega-dropdowns/ for what the code looks like, all I've done to the jQuery is add the same animation on .hide() which worked flawlessly)

Any insight would be greatly appreciated.

Edit: Actually that error was being caused by the hide(), for some reason it started It didn't appear during testing though of that, only after I moved on to change the open animation property. .animate() does not do anything (no error and no animation)

Solution: I reword some of the mega dropdowns code and got the animation working. It seems the animate tag was working except for some style conflicting with it. The hide animation was fixed in a similar method (although it took a bit more than to re-use the .animate() function). Even after the animation changes The mouse over effect would not work till I placed it in it's own function and then had that function call the main megedropdowns function once the animation was completed. Anyways I got it works, thanks

2

2 Answers 2

0

You're trying to call animate, not show.

0
0
$("#container").find('#test').animate({
    opacity: "show",
    height: "show",
    width: "show"
}, 5000);

Example: http://fiddle.jshell.net/MFrXe/2/

You might also want to take a look at the documentation of .show() here.

Read comments to get a sense why .show() is not needed. Thanks to SLaks for letting me know. :P

3
  • @SLaks: Even if it has been .hide()'n ?
    – Shaz
    Mar 16, 2011 at 3:31
  • Yes; the animate call will show it. "show" is supported as a value; that's how .show(time) is implemented.
    – SLaks
    Mar 16, 2011 at 3:36
  • @SLaks: Wow, I didn't event know that. I updated my answer, thanks!
    – Shaz
    Mar 16, 2011 at 3:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.