0
JSFiddle（私が持っているコードに関連する助けが必要）アニメーションではありません最高（私はjavascriptに新しい）とよく... CSSはまた乱雑です。おそらく私は解決策を見つけることができません。slideToggleは
しかし、基本的には、slideToggleはアニメーション化されていません（私はそれが欲しいのではありませんが）、あなたはCSSの大部分を見つけるでしょう（ほとんど無視できます）。スライドショーを滑らかにスライドさせるナビゲーションメニューです。スタイリングのない通常のulは何らかの理由でうまく動作しますが、何かの理由で私のスタイルがすべて乱れてしまいます:(
私は多くの異なる位置、高さ、表示、異なるdivs、名前を変更するもの、パディング、さらには私が問題になると思ったので、すべてのZ-インデックスを削除しました。アニメーション... 310pxから300pxのようにアニメーション化され、次に消えていく/多分いくつかの新鮮な目が、私はこの問題を解決することができます：それは実際には誰もがそれをいただければ幸いに役立つことができれば、それは
を混乱さている内部の子要素をスライドではない住んでいます。また、これは重複していない、私は文字通り50他のslideToggle stackoverflowの質問にされていない2つ以上の答えを組み合わせるときにも助けた...私はあなたの正確な問題に関連して答えを得ることになると思います。
ありがとうございます。私が何かを見逃したら、私に知らせてください。基本的に理由CSSを通じて適用さtransition財産の
$(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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t outline: 0;
\t font-weight: inherit;
\t font-style: inherit;
\t font-size: 100%;
\t font-family: inherit;
\t vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
\t outline: 0;
}
body {
\t line-height: 1;
\t color: black;
\t background: white;
}
ol, ul {
\t list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
\t border-collapse: separate;
\t border-spacing: 0;
}
caption, th, td {
\t text-align: left;
\t font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: "";
}
blockquote, q {
\t quotes: "" "";
}
/* END RESET */
html {
\t height: 100%;
\t width: 100%;
}
body {
\t height: 100%;
\t width: 100%;
}
#navBar {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t width: 100%;
\t height: 50px;
\t background-color: #FFF;
\t text-align: center;
\t border-bottom: 4px solid #349BD4;
\t position: fixed;
\t -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 {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t display: inline-block;
\t height: 100%;
\t width: 1200px;
\t text-align: center;
\t margin-left: auto;
\t margin-right: auto;
\t background-color: #FFF;
}
#navBar #navContent ul {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t background-color: #FFF;
\t height: 100%;
\t width: 800px;
\t float: left;
\t overflow: hidden;
}
#navBar #navContent ul li {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
list-style: none;
float: left;
text-align: center;
height: 50px;
\t display: block;
\t width: auto;
}
#navBar #navContent ul li a {
\t width: 90px;
\t height: 20px;
\t padding: 15px;
\t display: block;
\t text-decoration: none;
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
\t font-style: normal;
font-weight: 300;
\t font-size: 18px;
\t color: #2C363F;
\t transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
#navBar #navContent ul li a:hover {
\t background-color: #349BD4;
\t color: #FFF;
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
}
#navBar #navContent ul li a.active {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t background-color: #349BD4;
\t color: #FFF;
}
#navBar #navContent #server {
\t float: right;
\t display: block;
\t height: 20px;
\t width: auto;
\t margin-top: 10px;
\t margin-right: 5px;
\t margin-left: 5px;
\t margin-bottom: 10px;
\t padding-top: 5px;
\t padding-right: 10px;
\t padding-left: 10px;
\t padding-bottom: 5px;
\t color: #2C363F;
\t border-radius: 15px;
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
\t font-style: normal;
font-weight: 400;
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
}
#navBar #navContent #server:hover {
\t background-color: #349BD4;
\t color: #FFF;
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t cursor: pointer;
}
#navBar #navContent #menu {
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .25s ease-in-out;
\t display: none;
\t width: 40px;
\t height: 30px;
\t margin: 5px;
\t margin-right: 20px;
\t padding-top: 3px;
\t padding-bottom: 3px;
\t float: right;
\t border: 2px solid #AEC1D3;
\t border-radius: 5px;
\t color: #787878;
}
#header {
\t
}
#main {
\t width: 100%;
\t height: 3000px;
\t background-color: #FFF;
\t top: 54px;
}
.test {
\t margin-top: 100px;
}
#pull {
\t margin-top: 90px;
\t display: block;
\t position: relative;
}
@media screen and (min-width: 761px) and (max-width: 1240px) {
\t
#navBar {
\t width: 100%;
}
#navBar #navContent {
\t width: 100%;
}
\t
#navBar #navContent #server {
\t opacity: 0;
\t content: none;
\t color: #FFF;
}
#navBar #navContent #server:hover {
\t opacity: 0;
\t content: none;
\t background-color: #FFF;
\t cursor: default;
}
\t
}
@media screen and (min-width: 551px) and (max-width: 4000px) { /*styles for small screens in here*/
#navBar {
\t width: 100%;
\t float: none;
}
#navBar #navContent {
\t width: 100%;
\t float: none;
}
#navBar #navContent ul {
\t display: block;
\t height: 310px;
\t width: 100%;
\t float: none;
}
#navBar #navContent ul li {
\t width: 100%;
\t display: inline;
\t height: 50px;
\t float: none;
}
#navBar #navContent ul li a {
\t width: 100%;
\t height: 100%;
\t padding: 0px;
\t margin: 0px;
\t display: inline-block;
\t float: none;
}
#navBar #navContent ul li a:hover {
\t width: 100%;
\t display: block;
\t float: none;
}
#navBar #navContent #menu {
\t display: block;
\t width: 40px;
\t height: 30px;
\t margin: 5px;
\t margin-right: 20px;
\t padding-top: 3px;
\t padding-bottom: 3px;
\t float: right;
\t border: 2px solid #AEC1D3;
\t border-radius: 5px;
\t color: #787878;
}
#navBar #navContent #menu:after {
\t display: inline-block;
}
#navBar #navContent #server {
\t position: absolute;
\t float: left;
\t margin-left: 20px;
}
@media screen and (max-width: 550px) { /*styles for tiny screens in here*/
html {
\t height: 100%;
\t width: 100%;
}
body {
\t height: 100%;
\t width: 100%;
\t margin: 0px;
}
#navBar {
\t width: 100%;
\t height: 75px;
\t background-color: #454545;
\t text-align: center;
\t border-bottom: 15px solid #2F2F2F;
\t position: fixed;
}
#navBar #navContent {
\t display: inline-block;
\t height: 100%;
\t width: 400px;
\t text-align: center;
\t margin-left: auto;
\t margin-right: auto;
\t background-color: #454545;
}
#navBar #navContent ul {
overflow: hidden;
margin: 0;
padding: 0;
\t background-color: #454545;
\t height: 100%;
}
#navBar #navContent ul li {
list-style: none;
float: left;
text-align: center;
height: 100%;
\t display: block;
\t background-color: #454545;
\t width: 20%;
\t width: calc(100%/5);
}
#navBar #navContent ul li a {
\t height: 100%;
\t width: 100%;
\t display: block;
\t text-decoration: none;
\t display: flex;
/* flex-direction: column;*/
align-items: center;
\t text-align: center;
\t font-family: 'Josefin Sans', sans-serif;
\t font-style: normal;
font-weight: 700;
\t font-size: 24px;
\t justify-content: center;
\t color: #FFF;
\t transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
#navBar #navContent ul li a:hover {
\t background-color: #349BD4;
\t color: #FFF;
\t transition: all .25s ease-in-out;
\t -moz-transition: all .25s ease-in-out;
\t -webkit-transition: all .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>
を除去することにより、
#navBar #navContent ul li a？なぜなら、私はCSSでフェードアニメーションを行う方法しか知りませんし、同時に両方を同時に使うことができない場合は、大きな問題です。 –@LeeTzilantonis何か問題がある場合は、試してみてください。 –
ちょうどこれが実際問題であったと言いたいのですが、私は今、単純な色の変更と境界線のみを適用するようにトランジションを変更しました。演劇の例：https://climaxmc.org –