Animating inline elements with JQuery

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.

Thanks.

<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>

From stackoverflow

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

  From nickf

• 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>
  

  nickf : this solution works the same as mine, but is obviously much better!
  From Owen

• As other answers have shown, fading is possible. However, I don't think "smooth sliding" will be. Simply put, a specific property of the element has to be animated. An inline span like you mention has no specific height or width, though it does have an opacity.

  From defrex

• I don't think what you want to do is possible until display:inline-block is well supported across browsers. For now, I think I would fade the background to red, and then hide the element.

  If display:inline-block was well supported, you could change the style to inline-block, and then animate the width or height, but unfortunately that won't work very well these days. Maybe in 2010 :)

  From John C

• The fact that 'animate' changes what it is animating to a block element is not an issue if what you are trying to slide left or right is positioned with float:left and whatever is next to it is also positioned with float:left

   $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });
  

  if #btnUpdateButton is styled with the following then it slides quite nicely and pushes the content to the right.

  #btnUpdateButton {
      float: left;
      margin-right: 5px;
  }
  

  From Simon_Weaver

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

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

  From Terion