Animating inline elements with jQuery

Question

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

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.

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

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

Answer 1

toggle() has a bunch of weird things with it, including hiding or transforming odd elements at times. here's a similar solution:

$('.toggle').click(function() {
  $('.hide').animate({
    'opacity' : 'toggle',
  });
});

edit: here's a way to add smooth sliding, with minimal extra HTML markup:

var hidepos = $('.hide').offset().left;
var slidepos = $('.slide').offset().left;

$('.toggle').click(function() {
    var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;

    $('.slide').css({
        'left' : $('.slide').offset().left,
        'position' : 'fixed',
    }).animate({
        'left' : goto,
    }, function() {
        $(this).css('position', 'static');
    });

    $('.hide').animate({
        'opacity' : 'toggle',
    });
});

html:

<p>Hello <span class="hide">there</span> <span class="slide">jquery</span></p>
<button class="toggle">Toggle</button>

Answer 2

Just one CSS-property will make you happy: http://terion-fallen.livejournal.com/332945.html

#animated-element { display: inline-block!important }

Answer 3

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})
    ;
});