<p>I am trying to show and hide an inline element (eg a span) using jQuery.</p>

<p>If I just use toggle(), it works as expected but if I use toggle("slow") to give it an animation, it turns the span into a block element and therefore inserts breaks.</p>

<p>Is animation possible with inline elements?  I would prefer a smooth sliding if possible, rather than a fade in.</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
&lt;/script&gt;
&lt;p&gt;Hello &lt;span class="hide"&gt;there&lt;/span&gt; jquery&lt;/p&gt;
&lt;button class="toggle"&gt;Toggle&lt;/button&gt;
</code></pre>

I don't think it is possible like that. The only way I could think to do it would be to animate its opacity between 0 and 1, and, using a callback on the animation, then turn it on or off.
```
```
$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});
```
```