jquery - Javascript Callbacks within Object Methods -


this more question involving why 1 of solutions works , other doesn't. i'm new js, been learning couple of months , whilst have of basics down, feel knowledge of best practice lacking.

i'm creating animated hero image top of infographic , on i'm using js create 2 trains moving across screen, 1 left right , other right left. created following code, worked: 

    $(document).ready(function() {          var anim = {             train1: $(".train-one"),             train2: $(".train-two"),               moveleft: function(percent, duration) {                  anim.train1.animate({left: percent}, duration, "linear")             },              moveright: function(percent, duration) {                  anim.train2.animate({right: percent}, duration, "linear")             },               lefttrain: function() {                 anim.moveleft("33%", 1000, anim.moveleft)                     anim.moveleft("66%", 2000, anim.moveleft)                          anim.moveleft("100%", 1000, anim.moveleft)                             anim.moveleft("-100px", 1)             },              righttrain: function() {                  anim.moveright("40%", 1000, anim.moveright)                     anim.moveright("60%", 2000, anim.moveright)                         anim.moveright("100%", 1000, anim.moveright)                                 anim.moveright("-100px", 1)             },         };          anim.lefttrain();         anim.righttrain();         setinterval(anim.lefttrain, 5000);         setinterval(anim.righttrain, 6000);      });

what i'm wondering why following didn't work when expected to, created seperate method reset train once callbacks had been completed:

        resetlefttrain: function(test) {         anim.train1.css("left", "-100px ");     },      lefttrain: function() {         anim.moveleft("33%", 1000, anim.moveleft)             anim.moveleft("66%", 2000, anim.moveleft)                 anim.moveleft("100%", 1000, anim.resetlefttrain)                         anim.resetlefttrain()     },

sorry if answer obvious, i'm not used callbacks in plain js. please feel free give other pointers regarding structure etc. appreciate it!

cheers.

edit: solved issues answers below , code works follows: 

    $(document).ready(function() {          var anim = {             train1: $(".train-one"),             train2: $(".train-two"),           moveleft: function(percent, duration, callback) {             this.train1.animate({left: percent}, duration, "linear", callback)         },          moveright: function(percent, duration, callback) {             this.train2.animate({right: percent}, duration, "linear", callback)         },          resetlefttrain: function() {             this.train1.css("left", "-100px");         },          resetrighttrain: function() {             this.train1.css("right", "-100px");         },          lefttrain: function() {             var self = this;              this.moveleft("33%", 1000, function() {                 self.moveleft("66%", 2000, function(){                     self.moveleft("100%", 1000, function(){                         self.resetlefttrain();                     });                 });             });         },          righttrain: function() {             var self = this;              this.moveright("40%", 1000, function() {                 self.moveright("60%", 2000, function(){                     self.moveright("100%", 1000, function(){                         self.resetrighttrain();;                     });                 });             });         },     };      anim.lefttrain();     anim.righttrain();     setinterval($.proxy(anim.lefttrain, anim), 5000);     setinterval($.proxy(anim.righttrain, anim), 6000);      });

next time may using jquery .promise() method avoid ugly indentation.

thanks help, hope question , it's answers useful others

you need provide anonymous callback functions animations. lack or semi-colons give impression nested :)

 anim.moveright("40%", 1000, function(){     anim.moveright("60%", 2000, function(){         anim.moveright("100%", 1000, function(){                 anim.moveright("-100px", 1);         });      });  });

and make methods take callback pass on:

moveright: function(percent, duration, callback) {      anim.train2.animate({right: percent}, duration, "linear", callback); },

the end result each animate call finished, execute code provided, chaining animations together.


Comments

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w
Read more

php - $params->set Array between square bracket -

i'm using k2 in joomla 3.3. i'm trying set params (items ids ) module k2_content item.php file. result must between brackets, like: ["96","68"] my code is: $query = "select * #__k2_items extra_fields_search = '$myautor' , catid !=1 " ; $db->setquery($query); $losautores = $db->loadobjectlist(); $result = array(); foreach ($losautores $key => $value) { $result[] = '" '.$value->id.' "'; } $string_version = implode(',', $result); $autoresfinal = '['.$string_version.']'; if test using print, looks ok. passing var pramas, 1064 error. $params->set('items', $autoresfinal); to test tried $autoresfinal = ["96","68"]; and works fine. idea why doesn't work? thank you. if assign ["x","y"] assigning an array . here transforming array in st
Read more