stackoom
  简体   繁体   中英

Reverse animation when clicked if hidden

 原文  2018-01-02 22:22:36  8   2    javascript/ jquery/ html/ css/ animation

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!!

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>

2 answers

solution1
 0  2018-01-02 22:41:01

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/

solution2
 0 ACCPTED  2018-01-02 22:55:40

You have to set the left property of the button as a string. Using the "%" symbol like you did is not allowed in 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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Toggle a reverse animation when a button is clicked the second time Element not hidden when button is clicked Set element to Hidden when clicked Prevent an element hidden when it clicked animation Flip div when clicked Create a +1 Animation when button is clicked Anchor hidden div when button is clicked display hidden divs when another div is clicked Hide/display hidden div when button is clicked How to show hidden column when button is clicked
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM