Animate / transition height with CSS3, but using jQuery? -

-

i'm trying make show/ hide menu button mobile devices using media queries.

i'm aware css3 on mobile faster, of time, on mobile compared using jquery animate because of hardware acceleration, hence want use method.

i need smooth, 0.5s css3 animation 0px whatever height container is.

what i'd - or logic i'd thought of far - when clicking ui icon, toggle height of .nav>ul 0px auto.

i've tried using transition: height , adding class required bit using jquery, cannot figure out how apply css£ transform / transition height , smoothly toggle height, , i'm stuck. don't know google (have tried, trust me!).

here's working jsfiddle: http://jsfiddle.net/3v47n/ - small grey 20x20 icon trigger.

my jquery:

$('.nav span').on('click',function(){      $('.nav ul').addclass('animateheight')  });

and css:

.nav { min-height: 60px; } .nav ul { height: 0; overflow: hidden; transition: height 0.5s ease; } .nav ul.animateheight { height: auto; max-height: 9999px; }

just found solution you, maybe not best solution, workaround.

as can't transition height: auto transition max-height. need set target height value close height: auto, big bigger.

see here: http://jsfiddle.net/3v47n/5/

.nav ul {   max-height: 0;   overflow: hidden;   transition: max-height 2s ease; } .nav ul.animateheight {   max-height: 999px; }

Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more