javascript - Trying to slide an entire div off the page and slide a new one onto the page. Console is logging but div is not moving. Why? -
the problem javascript function not moving div .poop out of screen:
$('#placeholder').mouseup(function() { console.log(answeredcorrectly); if (answeredcorrectly === true) { $('.poop').animate({left: '-50%'}, 500); } }); the div not want move, have feeling has me changing .html. remember reading somewhere bad practice. maybe when add these classes #placeholder not translate over. im unsure. vision keep bottom bar stationary, entire div off page , replace new div (i have yet create). if have anymore tips i'd appreciate it, learning. filler fluff because according notification on side post code.
var $square = $('.square'); var $china = $('#chinabox'); var $checkanswer = $('#checkanswerwrapper'); var answeredcorrectly = false; $('.square').on('click',function(){ $('this').removeclass('selectedsquare'); $(this).addclass('selectedsquare'); }); function resetbuttonifincorrect() { answeredcorrectly = false; $('#checkanswer').toggleclass('incorrectanswer'); $('#checkanswer').removeclass('correctanswer'); $('#placeholder').removeclass('animated slideinup').addclass('animated fadeoutdown'); $('#reviewtext').removeclass('animated slideinup').addclass('animated fadeoutdown'); $('#checkanswer').html('incorrect'); settimeout(function() { $('#checkanswer').toggleclass('incorrectanswer'); $('#checkanswer').css('background', '#ffffff !important'); $('#checkanswer').html('submit'); }, 2000); } $('#checkanswer').on('click', function() { if ($china.hasclass('selectedsquare') === true) { answeredcorrectly = true; $(this).removeclass('incorrectanswer'); $(this).addclass('correctanswer'); $(this).html('correct!'); $('#reviewtext').html('中(zhōng) 国(guó), literally means "middle kingdom", how china in mandarin.') $('#placeholder').html('<div id = "nextbutton">next</div>'); $('#placeholder').addclass('buttonwrapper'); $('#placeholder').addclass('animated slideinup'); $('#reviewtext').addclass('animated slideinup') } else { resetbuttonifincorrect(); } }); $('#placeholder').mouseup(function() { console.log(answeredcorrectly); if (answeredcorrectly === true) { $('.poop').animate({left: '-50%'}, 500); } }); <div class = "poop"> <h1>how "china"?</h1> <div class = "squarewrapper"> <div class="square" id = "americabox"> <div class = "textinsquare" > 美国 / měiguó </div> </div> <div class="square" id = "francebox"> <div class = "textinsquare" > 法国(fàguó)</div> </div> <div class="square" id = "japanbox"> <div class = "textinsquare" > 日本 (rìběn)</div> </div> <div class="square" id = "chinabox"> <div class = "textinsquare" > 中国 (zhōngguó)</div> </div> </div> <div id = "checkanswerwrapper"> <div id = "checkanswer">submit</div> </div> <div id = "reviewplusnextlesson"> <div id = "reviewplusnextlessonwrapper"> <p id= "reviewtext"></p> <div id = "placeholder"> </div> </div> </div> </div> <div id = "bottombar"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src = "../javascript/mandarin_lesson_1.js"> </script> body { background-image: linear-gradient(-180deg, #0047e4 0%, #00a6ff 100%); background-size: auto 100%; overflow: hidden; margin: auto; } @font-face { font-family: fipps; src: url('fipps-regular-copy.otf'); } @font-face {font-family: hongkong; src: url('hongkong.ttf');} h1 { padding-top: 70px; text-align: center; color: black; font-family: fipps; margin-bottom: 0; } .squarewrapper { width: 80%; margin: 50px auto; } .square { width: 200px; height: 200px; margin-left: 10px; margin-top: 10px; float: left; /* rectangle 6: */ background: #ffffff; box-shadow: 0 4px 8px 0 rgba(88,88,88,0.50); border-radius: 2%; } .square:hover { transform: scale(1.1, 1.1); z-index: 1; } .selectedsquare { outline: 3px dashed white; outline-offset: -10px; } #chinabox { background-image: url("../images/chinabox.png"); background-size: 110%; background-position: center; } #japanbox { background-image: url("../images/japanbox.png"); background-size: 110%; background-position: center; } #francebox { background-image: url('../images/francebox.png'); background-size: 110%; background-position: center; } #americabox { background-image: url('../images/americabox.png'); background-size: 110%; background-position: center; } .textinsquare { width: 100%; height: 15%; background: #e6ffff; position: relative; top: 85%; text-align: center; font-size: 22px; } #checkanswerwrapper { width: 100%; float: left; margin-top: 50px; margin-bottom: 50px; } #checkanswer { padding-top: 5px; width: 300px; height: 50px; background: #ffffff; margin: 30px auto; text-align: center; font-size: 30px; border-radius: 3px; } .correctanswer { background: #00ff80 !important; } .incorrectanswer { background: #ff1a1a !important; } #reviewplusnextlesson { position: absolute; top: 75%; width: 100%; height: 70%; margin: 100px auto; background: #e2e0e2; z-index: inherit; vertical-align: 20px; box-shadow: 0 0 20px 0 rgba(1, 1, 1, 0.6); } #reviewplusnextlessonwrapper { width: 90%; margin: 0 auto; } #reviewtext { float: left; text-align: center; font-size: 20px; font-weight: bold; } .buttonwrapper { float: left; width: 130px; height:30px; border: solid; border-radius: 5px; margin-left: 10px; margin-top: 15px; } #nextbutton { font-size: 20px; font-weight: bold; padding-top: 5px; text-align: center; } #bottombar { position: absolute; top: 75%; width: 100%; height: 70%; margin: 100px auto; background: #e2e0e2; z-index: -1; vertical-align: 20px; box-shadow: 0 0 20px 0 rgba(1, 1, 1, 0.6); }
Comments
Post a Comment