Question

When I use .slideToggle on an element, it doesn’t display an animation
for the “show” event, but it does do an animation for the “hide” part of
the toggle.

I hope this is not an idiotic question, but i’ve been searching around and I cannot find an answer. I am just learning Jquery, so forgive me if i’ve made a simple mistake.

This other post asks a similar question, but the definitions (slide toggle: animation toggle: no animation) don’t seem to work.

Here’s the J fiddle:

http://jsfiddle.net/9jUNS/

Thanks for taking a look!
-Nick

Answer 1

The problem is arising because the way in which jQuery animates the span element causes the layout to take the default inline rendering of a span and display it with absolute positioning and block layout.

Update your CSS to the following:

.demo span {
    margin: 10px;
    display: inline-block;
    overflow: hidden;
}

This should correct the positioning and layout and let jQuery animate the elements correctly.