javascript - How to make a picture fly in and out on transitions with jquery -


hi have started making web.

enter image description here

i desperately trying make menus fly-in , out on transitions. want menus fly-in in order starting top bottom.

i have updated question original.

html:

<div id="flyin"> <form action="woodenglish.html" method="get">                    <input id="wood" type="image" src="wood.png" alt="submit" >  </form> </div> 

javascript:

<script type="text/javascript">  $(document).ready(function () {   var currwidth = $(window).width();   console.log(currwidth);    var startpos = -1;   var endpos = 1000;   console.log(endpos);    $('#flyin').animate({left: endpos},1000);    $('#wood, #submit2').click(function () {         if (this.id == 'wood') {             $('#flyin').animate({left: endpos}, 1000);           }         else if (this.id == 'submit1') {             alert('submit 2 clicked');         }     }); });  </script> 

however there still 2 problems code

  1. is this; var currwidth = $(window).width(); think. need buttons fly screen out of screen , atm not allowed that.

  2. atm doesn't wait until animation complete before loading next html on action form.

thx in advance contributions

you have referenced items in <head>, before loaded. please wrap in document ready function:

$(document).ready(function () {   var currwidth = $(window).width();   console.log(currwidth);    var startpos = -100;   var endpos = (currwidth / 2) + (startpos / 2);   console.log(endpos);    $('#flyin').animate({left: endpos}, 1000); }); 

fiddle: http://jsbin.com/pafigicabo/edit?js,output


Comments

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -