如果隱藏則單擊時反轉動畫
[英]Reverse animation when clicked if hidden
問題描述
我試圖在導航欄隱藏后向左滑動“切換按鈕”，然后向左滑動，然后在顯示導航欄時將其滑動回原始位置。 這是我目前正在嘗試的方法。
這不起作用：
$(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>
2 個解決方案
解決方案1
0 2018-01-02 22:41:01
正如其他海報所提到的那樣，如果看不到您的標記，這有點困難，但是我會在沒有看到您的消息來源的情況下大聲疾呼。
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
$toolbar.animate({
width:'toggle'
}, 750);
});
});
小提琴： https : //jsfiddle.net/3rbj19n9/
解決方案2
0 已采納 2018-01-02 22:55:40
您必須將按鈕的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可以處理該問題。
第二次單擊按鈕時切換反向動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.