jQuery .show() .hide() animation problems

On a call to show() or hide() the animation always plays twice for me. It is much easier to understand here.

A second related problem is that the animation for hid开发者_开发百科e will play even if the object is already hidden (choose the first option from the drop-down and then choose the second option).

I think the problem is that you've got that setup script inside the dialog <div>. Move that code down to the script at the bottom of the page and it should work better.

There's still the problem that it calls "hide" unnecessarily when the target box is already hidden, but that should be pretty easy to fix.

Well, I don't know if I save it correctly on JS Bin but here it goes: http://jsbin.com/umira4/19/edit

I hope this is what you were looking for :)

Take a look at .toggle( showOrHide ), http://api.jquery.com/toggle/

This will handle it for you automatically.

As Aaron said, there are some functions in jQuery that will take care of toggling the display of the inputs for you automatically. I think the one you are looking for is slideToggle().

Not exactly sure what the issue is, but when you clean up your JS into a separate file and use the slideToggle method it seems to work fine.

Here is what worked for me: http://jsbin.com/umira4/20/edit