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