javascript - Element disappears after the re-appear animation completes -
can give me insight why element disappears (gets hidden) after re-appearing animation completes upon hitting toggle switch .project-list 3rd time. there flaw in if/else statement?
here css animation classes slidedown (disappear) , slideup.
http://www.justinaguilar.com/animations/css/animations.css
var main = function() { var enabled = false; //$('#project-box').hide(); $('.project-list').click(function() { debugger; if (enabled == false) { $('#project-box').addclass("slideup"); $('#project-box').removeclass("slidedown"); enabled = true; $('#project-box').show(); } else { $('#project-box').removeclass("slideup"); $('#project-box').addclass("slidedown"); enabled = false; $("#project-box").on('webkitanimationend', function() { $('#project-box').hide(); }); } //$('#project-box').toggleclass("slideup"); }); // $(window).scroll(function () { // $('#project-box').each(function () { // var imagepos = $(this).offset().top; // // var topofwindow = $(window).scrolltop(); // if (imagepos < topofwindow + 400) { // $(this).addclass("slideup"); // } // }); // }); //$('#carousel').carousel('cycle'); } $(document).ready(main);/* exit animation -------------------------------------------------- */ .slidedownedit { animation-name: slidedown; -webkit-animation-name: slidedown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: hidden !important; } @keyframes slidedown { 0% { transform: translatey(-100%); } 50% { transform: translatey(8%); } 65% { transform: translatey(-4%); } 80% { transform: translatey(4%); } 95% { transform: translatey(-2%); } 100% { transform: translatey(0%); } } @-webkit-keyframes slidedown { 0% { -webkit-transform: translatey(0%); } 100% { -webkit-transform: translatey(500%); visibility: hidden; } } /* footer -------------------------------------------------- */ .footer { background-color: #dddee1; bottom: 0; width: 100%; /* set fixed height of footer here */ height: 60px; border: 1px solid grey; } .footer p { font-size: 18px; margin-top: 10px; color: #777; position: absolute; } .footer { color: #b55e5e; font-size: 16px; margin-top: 10px; } .footer .pull-right { color: #b55e5e; font-size: 16px; margin-top: 10px; right: 10%; } /* featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* space out bootstrap <hr> more */ } /* thin out marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; margin-top: 120px; font-size: 50px; display: inline-block; } /* project box ------------------------- */ #project-box { text-align: center; cursor: pointer; border: 3px solid #636366; cursor: pointer; width: 75%; margin: auto; visibility: hidden; } #project-divider.featurette-divider { margin: 10px 0; } #project-box { font-size: 30px; margin-left: 300px; margin-right: 100px; color: darkred; display: block; margin: auto; } #project-box p { font-size: 20px; color: dimgrey; } .project-list { cursor: pointer; color: darkred; } .slider { overflow-y: scroll; max-height: 500px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slider.closed { max-height: 0; } .slideup { animation-name: slideup; -webkit-animation-name: slideup; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideup { 0% { transform: translatey(100%); } 50% { transform: translatey(-8%); } 65% { transform: translatey(4%); } 80% { transform: translatey(-4%); } 95% { transform: translatey(2%); } 100% { transform: translatey(0%); } } @-webkit-keyframes slideup { 0% { -webkit-transform: translatey(100%); } 50% { -webkit-transform: translatey(-8%); } 65% { -webkit-transform: translatey(4%); } 80% { -webkit-transform: translatey(-4%); } 95% { -webkit-transform: translatey(2%); } 100% { -webkit-transform: translatey(0%); } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>murray studio</title> <meta name="description" content="main page murray studio"> <link rel="icon" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="main.css"> </head> <body> <!-- wrap rest of page in container center content. --> <div class="container marketing"> <!-- start featurettes --> <hr class="featurette-divider"> <div class="row featurette"> <div class="first-featurette"> <div class="col-md-7"> <a class="featurette-heading" href="#">projects.</a> <p class="lead">donec ullamcorper nulla non metus auctor fringilla. vestibulum id ligula porta felis euismod semper. praesent commodo cursus magna, vel scelerisque nisl consectetur. fusce dapibus, tellus ac cursus commodo.</p> <p class="project-list">see projects.</p> <div id="object" class="slideup"> <div id="object" class="slidedownedit"> <div id="project-box"> <a>embraer adds third legacy 500 prototype flight test campaign</a> <hr class="featurette-divider" id="project-divider"> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> </div> </div> </div> </div> <div class="col-md-5"> <img class="featurette-image img-responsive center-block" src="http://a1.dspnimg.com/data/l/423341110329_qy737vid_l.jpg" alt="generic placeholder image"> </div> </div> </div> <hr class="featurette-divider"> </div> <!-- /end featurettes --> <!-- footer --> <footer class="footer"> <div class="container"> <p class="pull-right"><a href="#">back top</a> </p> <p>© 2014 company, inc. · <a href="#">privacy</a> · <a href="#">terms</a> </p> </div> </footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="main.js"></script> </body> </html>
your problem because within webkitanimationend event handler aren't checking state. below code event handler means every time animation on #project-box ends box hidden. happens 3rd time because attaching event handler on 2nd click.
$("#project-box").on('webkitanimationend', function() { $('#project-box').hide(); }); you can fix checking state within event handler in below code:
var main = function() { var enabled = false; //$('#project-box').hide(); $('.project-list').click(function() { //debugger; if (enabled == false) { $('#project-box').addclass("slideup"); $('#project-box').removeclass("slidedown"); enabled = true; $('#project-box').show(); } else { $('#project-box').removeclass("slideup"); $('#project-box').addclass("slidedown"); enabled = false; $("#project-box").on('webkitanimationend', function() { if (enabled == false) $('#project-box').hide(); }); } //$('#project-box').toggleclass("slideup"); }); // $(window).scroll(function () { // $('#project-box').each(function () { // var imagepos = $(this).offset().top; // // var topofwindow = $(window).scrolltop(); // if (imagepos < topofwindow + 400) { // $(this).addclass("slideup"); // } // }); // }); //$('#carousel').carousel('cycle'); } $(document).ready(main);/* exit animation -------------------------------------------------- */ .slidedownedit { animation-name: slidedown; -webkit-animation-name: slidedown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: hidden !important; } @keyframes slidedown { 0% { transform: translatey(-100%); } 50% { transform: translatey(8%); } 65% { transform: translatey(-4%); } 80% { transform: translatey(4%); } 95% { transform: translatey(-2%); } 100% { transform: translatey(0%); } } @-webkit-keyframes slidedown { 0% { -webkit-transform: translatey(0%); } 100% { -webkit-transform: translatey(500%); visibility: hidden; } } /* footer -------------------------------------------------- */ .footer { background-color: #dddee1; bottom: 0; width: 100%; /* set fixed height of footer here */ height: 60px; border: 1px solid grey; } .footer p { font-size: 18px; margin-top: 10px; color: #777; position: absolute; } .footer { color: #b55e5e; font-size: 16px; margin-top: 10px; } .footer .pull-right { color: #b55e5e; font-size: 16px; margin-top: 10px; right: 10%; } /* featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* space out bootstrap <hr> more */ } /* thin out marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; margin-top: 120px; font-size: 50px; display: inline-block; } /* project box ------------------------- */ #project-box { text-align: center; cursor: pointer; border: 3px solid #636366; cursor: pointer; width: 75%; margin: auto; visibility: hidden; } #project-divider.featurette-divider { margin: 10px 0; } #project-box { font-size: 30px; margin-left: 300px; margin-right: 100px; color: darkred; display: block; margin: auto; } #project-box p { font-size: 20px; color: dimgrey; } .project-list { cursor: pointer; color: darkred; } .slider { overflow-y: scroll; max-height: 500px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slider.closed { max-height: 0; } .slideup { animation-name: slideup; -webkit-animation-name: slideup; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideup { 0% { transform: translatey(100%); } 50% { transform: translatey(-8%); } 65% { transform: translatey(4%); } 80% { transform: translatey(-4%); } 95% { transform: translatey(2%); } 100% { transform: translatey(0%); } } @-webkit-keyframes slideup { 0% { -webkit-transform: translatey(100%); } 50% { -webkit-transform: translatey(-8%); } 65% { -webkit-transform: translatey(4%); } 80% { -webkit-transform: translatey(-4%); } 95% { -webkit-transform: translatey(2%); } 100% { -webkit-transform: translatey(0%); } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>murray studio</title> <meta name="description" content="main page murray studio"> <link rel="icon" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="main.css"> </head> <body> <!-- wrap rest of page in container center content. --> <div class="container marketing"> <!-- start featurettes --> <hr class="featurette-divider"> <div class="row featurette"> <div class="first-featurette"> <div class="col-md-7"> <a class="featurette-heading" href="#">projects.</a> <p class="lead">donec ullamcorper nulla non metus auctor fringilla. vestibulum id ligula porta felis euismod semper. praesent commodo cursus magna, vel scelerisque nisl consectetur. fusce dapibus, tellus ac cursus commodo.</p> <p class="project-list">see projects.</p> <div id="object" class="slideup"> <div id="object" class="slidedownedit"> <div id="project-box"> <a>embraer adds third legacy 500 prototype flight test campaign</a> <hr class="featurette-divider" id="project-divider"> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> </div> </div> </div> </div> <div class="col-md-5"> <img class="featurette-image img-responsive center-block" src="http://a1.dspnimg.com/data/l/423341110329_qy737vid_l.jpg" alt="generic placeholder image"> </div> </div> </div> <hr class="featurette-divider"> </div> <!-- /end featurettes --> <!-- footer --> <footer class="footer"> <div class="container"> <p class="pull-right"><a href="#">back top</a> </p> <p>© 2014 company, inc. · <a href="#">privacy</a> · <a href="#">terms</a> </p> </div> </footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="main.js"></script> </body> </html>alternately, can detach event handler within else loop after has been executed mean attach/detach cycle within every loop don't think good.
note answer posted only explain source of problem. assuming having more (or different) necessitates use of .show() , .hide().
if requirement show/hide element on toggling switch , nothing more, approach provided in humble.rumble.6x3's answer easiest.
Comments
Post a Comment