Trouble getting two jquery animations to happen at the same time -
my code: http://jsfiddle.net/abbeynormal/tugyj69h/
when comment out line 5 of jquery, first animation runs fine. when add line 5 in, nothing happens.
according answers i've seen here on so, these 2 animations should occur @ same time, or without "queue:false" parameter.
any thoughts on why happens? thanks!
<!doctype html> <head> <meta charset="utf-8"> <style> #container { height: 400px; width: 400px; border-style: dotted; left: auto; right: auto; position: relative; overflow: hidden; } #gamestage { height: 400px; width: 400px; background-color: brown; display: inline-block; overflow: hidden; position: absolute; } #nextstage { height: 400px; width: 400px; background-color: green; display: inline-block; position: absolute; left: 100%; } </style> </head> <body> <div id="container"> <div id="gamestage"></div> <div id="nextstage"></div> </div> <button id="animate">animate</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script> $("#animate").click(move) function move() { $("#gamestage").animate({left:"-100%"}, {duration:2000, queue: false}); // $("#nextstage").animate({left:"50%"}), {duration:2000, queue: false}); } </script> </body>
the second line has syntax error, note below how close it
$("#nextstage").animate({left:"50%"}), {duration:2000, queue: false}); // ^ here, syntax error ! replace with
$("#nextstage").animate({left:"50%"}, {duration:2000, queue: false});
Comments
Post a Comment