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

Question

I am trying to slide a "toggle button" to the left after the navigation bar hides and slides left and then slide it back to the original position when showing navigation bar. 我试图在导航栏隐藏后向左滑动“切换按钮”，然后向左滑动，然后在显示导航栏时将其滑动回原始位置。 Here's what I'm trying currently. 这是我目前正在尝试的方法。

This does not work: 这不起作用：

$(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);
    }
  });
});

When I remove the animate method on the else block everything seems to work, when I add it back to reverse the "$toggle" button to the original position none of the code works.... any help is much much appreciated!! 当我删除else块上的animate方法似乎一切正常时，当我将其重新添加以将“ $ toggle”按钮恢复到原始位置时，所有代码均无效。...非常感谢任何帮助！

EDIT: added snippet below 编辑：下面添加了代码段

 $(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>

Answer 1

Without seeing your markup it is kind of difficult as the other posters have mentioned, but I'll yolo it without seeing your source. 正如其他海报所提到的那样，如果看不到您的标记，这有点困难，但是我会在没有看到您的消息来源的情况下大声疾呼。

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

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

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

Answer 2

You have to set the left property of the button as a string. 您必须将按钮的left属性设置为字符串。 Using the "%" symbol like you did is not allowed in JavaScript. JavaScript不允许像您一样使用“％”符号。 The correction looks like this: 更正如下所示：

 $(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 can handle that as you see. 如您所见，JQuery可以处理该问题。

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

问题描述

2 个解决方案

解决方案1
0 2018-01-02 22:41:01

解决方案2
0 已采纳 2018-01-02 22:55:40

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

问题描述

2 个解决方案

解决方案1 0 2018-01-02 22:41:01

解决方案2 0 已采纳 2018-01-02 22:55:40

解决方案1
0 2018-01-02 22:41:01

解决方案2
0 已采纳 2018-01-02 22:55:40