Animation with jquery , animate / toggle

Question

i would like to toggle #header-connect-content-toggled with a onclick on #header-connect-content-avatar, i tried two solutions:

• 1 : http://jsfiddle.net/DRhw6/19/

  $("#header-connect-content-avatar").click(function() {
    $("#header-connect-content-toggled").animate({width:'toggle'},2000);
  });
  

• 2 : http://jsfiddle.net/DRhw6/20/

  $("#header-connect-content-avatar").click(function() {
    $("#header-connect-content-toggled").toggle("slide", { direction: "right" }, 2000); 
  });
  

I have a div with fix content and another div with width variable.

Problem is , the content is verticaly modified or the container div does not follow the movement...

what is the correct way for this animation ?

Answer 1

See the fiddle here http://jsfiddle.net/yinkadet/DRhw6/28/ , I'm guessing that's what you want. The first approach is cleaner, I just added an overflow-x:hidden and made it not wrap on whitespace as below:

 <div id="header-connect-content-toggled" style="float: left; background-color: #800000; overflow:hidden; white-space:nowrap;">

That way, it slides right without the content breaking into new lines and stretching out your divs.

I hope this helps