如果隐藏，则单击时反转动画

问题描述 投票：0回答：2

我试图在导航栏隐藏并向左滑动后向左滑动“切换按钮”，然后在显示导航栏时将其滑回原始位置。这就是我现在正在尝试的。

这不起作用：

$(document).ready(function() {
  var $toolbar = $("#toolbar");
  var $toggle = $("#toggle");

  $toggle.on("click", function() {
    if ($toolbar.is(":visible")) {
        $toolbar.toggle(500);
        $toggle.animate({
            left: 0
        }, 500);
    } else if ($toolbar.is(":hidden")) {
        $toolbar.toggle(500);
        $toggle.animate({
            left: 20.5%
        }, 500);
    }
  });
});

当我删除else块上的animate方法时，一切似乎都有效，当我将其添加回来将“$ toggle”按钮反转到原始位置时，没有代码可以工作....任何帮助都非常感谢！

编辑：下面添加了片段

$(document).ready(function() {
  var $toolbar = $("#toolbar");
  var $toggle = $("#toggle");

  $toggle.on("click", function() {

	if ($toolbar.is(":visible")) {
		$toolbar.toggle(500);
		$toggle.animate({
			left: 0
		}, 500);
	} else if ($toolbar.is(":hidden")) {
		$toolbar.toggle(500);
	}
  });
});
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*===============================================*/

html, body {
	height: 100%;
	width: 100%;
}

body {
	background-image: url(../images/boatsunset.jpg);
	background-size: 100% 100%;
}

#shoppingCart {
	background-color: #00000000;
	float: right;
	margin-right: 1rem;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
  	border: none;
}

#shoppingCart img {
	height: 3rem;
	width: 3rem;
}

#toolbar {
	color: #000000;
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
  	width: 25%;
  	display: inline-block;
}

#toolbar ul {
 	position: relative;
 	display: inline-block;
 	width: 85%;
}

#toolbar li {
	margin: 2rem auto;
	cursor: pointer;
}

#toolbar li:hover {
	color: #aaaaaa88;
}

#toggle {
	background-color: #00000000;
	border: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20.5%;
	display: inline-block;
	color: #000000;
	font-size: 3rem;
	cursor: pointer;
}

#toggle:hover {
	color: #aaaaaa88;
}

#listborder {
	width: 80%;
	border-right: .2rem solid #aaaaaa55;
	height: 26rem;
	position: absolute;
	top: 51%;
  	transform: translateY(-50%);
  	z-index: -1;
  }
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
		<link rel="stylesheet" href= "assets/stylesheets/style.css">
		<meta name="viewport" content="width=device-width">
		<meta name="description" content="Artwork by Gia dalPozzo">
		<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
		<meta name="author" content="Marlin dalPozzo">
		<title>Gia dalPozzo | Home</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" src="assets/scripts/script1.js" async></script>
	</head>
	
	<body>
		<header>
			<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
		</header>

		<div id="toolbar">
			<ul>
				<li>Florals</li>
				<li>Landscapes</li>
				<li>Portraits</li>
				<li>My Story</li>
				<li>Events</li>
				<li>Contact Me</li>
			</ul>
			<div id="listborder"></div>
		</div>
		<div id="toggle">
			<p><</p>
		</div>

		<footer>
			<!--social media links/icons-->
			<!--copyright etc-->
			<!--date updated-->
		</footer>
	</body>
</html>
javascript jquery html css animation
2个回答
0
投票

您必须将按钮的left属性设置为字符串。在JavaScript中不允许使用“％”符号。修正如下：

$(document).ready(function() {
  var $toolbar = $("#toolbar");
  var $toggle = $("#toggle");

  $toggle.on("click", function() {

	if ($toolbar.is(":visible")) {
		$toolbar.toggle(500);
		$toggle.animate({
			left: "0"
		}, 500);
	} else if ($toolbar.is(":hidden")) {
		$toolbar.toggle(500);
    $toggle.animate({
      left: "20.5%"
    });
	}
  });
});
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*===============================================*/

html, body {
	height: 100%;
	width: 100%;
}

body {
	background-image: url(../images/boatsunset.jpg);
	background-size: 100% 100%;
}

#shoppingCart {
	background-color: #00000000;
	float: right;
	margin-right: 1rem;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
  	border: none;
}

#shoppingCart img {
	height: 3rem;
	width: 3rem;
}

#toolbar {
	color: #000000;
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
  	width: 25%;
  	display: inline-block;
}

#toolbar ul {
 	position: relative;
 	display: inline-block;
 	width: 85%;
}

#toolbar li {
	margin: 2rem auto;
	cursor: pointer;
}

#toolbar li:hover {
	color: #aaaaaa88;
}

#toggle {
	background-color: #00000000;
	border: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20.5%;
	display: inline-block;
	color: #000000;
	font-size: 3rem;
	cursor: pointer;
}

#toggle:hover {
	color: #aaaaaa88;
}

#listborder {
	width: 80%;
	border-right: .2rem solid #aaaaaa55;
	height: 26rem;
	position: absolute;
	top: 51%;
  	transform: translateY(-50%);
  	z-index: -1;
  }
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
		<link rel="stylesheet" href= "assets/stylesheets/style.css">
		<meta name="viewport" content="width=device-width">
		<meta name="description" content="Artwork by Gia dalPozzo">
		<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
		<meta name="author" content="Marlin dalPozzo">
		<title>Gia dalPozzo | Home</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" src="assets/scripts/script1.js" async></script>
	</head>
	
	<body>
		<header>
			<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
		</header>

		<div id="toolbar">
			<ul>
				<li>Florals</li>
				<li>Landscapes</li>
				<li>Portraits</li>
				<li>My Story</li>
				<li>Events</li>
				<li>Contact Me</li>
			</ul>
			<div id="listborder"></div>
		</div>
		<div id="toggle">
			<p><</p>
		</div>

		<footer>
			<!--social media links/icons-->
			<!--copyright etc-->
			<!--date updated-->
		</footer>
	</body>
</html>

如你所见，JQuery可以处理它。

0
投票

没有看到你的标记就像其他海报提到的那样有点困难，但我会在没有看到你的来源的情况下yolo它。

$(document).ready(function() {
    var $toolbar = $("#toolbar");
    var $toggle = $("#toggle");

    $toggle.on("click", function() {
        $toolbar.animate({
            width:'toggle'
        }, 750);
    });
});

小提琴：https://jsfiddle.net/3rbj19n9/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.