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 ?
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.