javascript - slideToggle not animating (need help related to the code i have) -
jsfiddle: https://jsfiddle.net/32oumq5k/
the problem: have been sitting here 2 hours, searching, editing , trying new things, please excuse me if code isnt best (im new javascript) , well... css messy .-. why cant find solution.
but basically, slidetoggle wont animate (well does, not want to), inside fiddle find alot of css (most of can ignored) im trying create navigation menu gracefully slides down... using slidetoggle, normal ul no styling works fine, reason style messes :(
i have tried many different positions, heights, widths, displays, different divs, renaming things, padding, removed z-indexes because thought problem. 1 thing did notice when doing of if background color ul set (to visualise animation... animates 310px 300px , dissapears leads me belive not sliding child elements has inside confusing
if appreciated :/ maybe fresh eyes me solve issue. not duplicate, have been literally 50 other slidetoggle stackoverflow questions none helped, when combining 2 or more answers... think best thing answer in relation exact problem.
thanks in advance. if missed please let me know.
$(document).ready(function() { $("#nav").hide(); $(function() { var pull = $('#menu'); menu = $('#nav'); menuheight = menu.height(); $("#menu").click(function() { menu.slidetoggle(200); }); $("#pull").click(function() { $(".test").slidetoggle(700); }); $(window).resize(function() { var w = $(window).width(); if (w > 320 && menu.is(':hidden')) { menu.removeattr('style'); } }); }); });@charset "utf-8"; /* css document */ /* start reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* end reset */ html { height: 100%; width: 100%; } body { height: 100%; width: 100%; } #navbar { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; width: 100%; height: 50px; background-color: #fff; text-align: center; border-bottom: 4px solid #349bd4; position: fixed; -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.3); -moz-box-shadow: 0 5px 5px rgba(0,0,0,.3); box-shadow: 0 5px 5px rgba(0,0,0,.3); } #navbar #navcontent { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; display: inline-block; height: 100%; width: 1200px; text-align: center; margin-left: auto; margin-right: auto; background-color: #fff; } #navbar #navcontent ul { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; background-color: #fff; height: 100%; width: 800px; float: left; overflow: hidden; } #navbar #navcontent ul li { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; list-style: none; float: left; text-align: center; height: 50px; display: block; width: auto; } #navbar #navcontent ul li { width: 90px; height: 20px; padding: 15px; display: block; text-decoration: none; font-family: "gill sans", "gill sans mt", "myriad pro", "dejavu sans condensed", helvetica, arial, sans-serif; font-style: normal; font-weight: 300; font-size: 18px; color: #2c363f; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; } #navbar #navcontent ul li a:hover { background-color: #349bd4; color: #fff; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; } #navbar #navcontent ul li a.active { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; background-color: #349bd4; color: #fff; } #navbar #navcontent #server { float: right; display: block; height: 20px; width: auto; margin-top: 10px; margin-right: 5px; margin-left: 5px; margin-bottom: 10px; padding-top: 5px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; color: #2c363f; border-radius: 15px; font-family: "gill sans", "gill sans mt", "myriad pro", "dejavu sans condensed", helvetica, arial, sans-serif; font-style: normal; font-weight: 400; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; } #navbar #navcontent #server:hover { background-color: #349bd4; color: #fff; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; cursor: pointer; } #navbar #navcontent #menu { transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; display: none; width: 40px; height: 30px; margin: 5px; margin-right: 20px; padding-top: 3px; padding-bottom: 3px; float: right; border: 2px solid #aec1d3; border-radius: 5px; color: #787878; } #header { } #main { width: 100%; height: 3000px; background-color: #fff; top: 54px; } .test { margin-top: 100px; } #pull { margin-top: 90px; display: block; position: relative; } @media screen , (min-width: 761px) , (max-width: 1240px) { #navbar { width: 100%; } #navbar #navcontent { width: 100%; } #navbar #navcontent #server { opacity: 0; content: none; color: #fff; } #navbar #navcontent #server:hover { opacity: 0; content: none; background-color: #fff; cursor: default; } } @media screen , (min-width: 551px) , (max-width: 4000px) { /*styles small screens in here*/ #navbar { width: 100%; float: none; } #navbar #navcontent { width: 100%; float: none; } #navbar #navcontent ul { display: block; height: 310px; width: 100%; float: none; } #navbar #navcontent ul li { width: 100%; display: inline; height: 50px; float: none; } #navbar #navcontent ul li { width: 100%; height: 100%; padding: 0px; margin: 0px; display: inline-block; float: none; } #navbar #navcontent ul li a:hover { width: 100%; display: block; float: none; } #navbar #navcontent #menu { display: block; width: 40px; height: 30px; margin: 5px; margin-right: 20px; padding-top: 3px; padding-bottom: 3px; float: right; border: 2px solid #aec1d3; border-radius: 5px; color: #787878; } #navbar #navcontent #menu:after { display: inline-block; } #navbar #navcontent #server { position: absolute; float: left; margin-left: 20px; } @media screen , (max-width: 550px) { /*styles tiny screens in here*/ html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0px; } #navbar { width: 100%; height: 75px; background-color: #454545; text-align: center; border-bottom: 15px solid #2f2f2f; position: fixed; } #navbar #navcontent { display: inline-block; height: 100%; width: 400px; text-align: center; margin-left: auto; margin-right: auto; background-color: #454545; } #navbar #navcontent ul { overflow: hidden; margin: 0; padding: 0; background-color: #454545; height: 100%; } #navbar #navcontent ul li { list-style: none; float: left; text-align: center; height: 100%; display: block; background-color: #454545; width: 20%; width: calc(100% / 5); } #navbar #navcontent ul li { height: 100%; width: 100%; display: block; text-decoration: none; display: flex; /* flex-direction: column;*/ align-items: center; text-align: center; font-family: 'josefin sans', sans-serif; font-style: normal; font-weight: 700; font-size: 24px; justify-content: center; color: #fff; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; } #navbar #navcontent ul li a:hover { background-color: #349bd4; color: #fff; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; } }<title>untitled document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="slidefix" id="navbar"> <div class="slidefix" id="navcontent"> <a href="#" id="menu"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a> <ul id="nav"> <li> <a class="active"> <i class="fa fa-home" aria-hidden="true"></i> home </a> </li> <li> <a href="#"> <i class="fa fa-shopping-basket" aria-hidden="true"></i> store </a> </li> <li> <a href="#"> <i class="fa fa-comments" aria-hidden="true"></i> forums </a> </li> <li> <a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> vote </a> </li> <li> <a href="#"> <i class="fa fa-users" aria-hidden="true"></i> users </a> </li> <li> <a href="#"> <i class="fa fa-envelope" aria-hidden="true"></i> contact </a> </li> </ul> <div id="server" data-clipboard-text="play.climaxmc.org"> play.climaxmc.org </div> </div> </div> <a id="pull">menu</a> <ul class="test"> <li><a href="#">home</a></li> <li><a href="#">how-to</a></li> <li><a href="#">icons</a></li> <li><a href="#">design</a></li> <li><a href="#">web 2.0</a></li> <li><a href="#">tools</a></li> </ul> </body>
its because of transition property applied through css. right i've disabled transition property elements , works expected. here demo.
above all, have given transition property things happens on particular element, includes hide , show too. transition:all .25s ease-in etc , transition time less 0.25 seconds. need decide , make use of css transitions , make sure, when have transition-all don't perform jquery animations. mis-behave happened now. above css transition applied property all change css of element menu.css('display','block'); takes care of animation animations , yea not forget increase transition time 3s or 4s
Comments
Post a Comment