working on slider, , ive noticed works great -
function slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setinterval(function() { switch (self.i) { case 0: $(element).velocity({ translatex: "-33.3333%" }); self.i++; break; case 1: $(element).velocity({ translatex: "-66.6666%" }); self.i++; break; case 2: $(element).velocity({ translatex: "0%" }); self.i = 0; break; } }, 2000); } slider.prototype.stop = function() { window.clearinterval(this.timer); } var = 0; $(".multi").each( function(){ label = "label_" + i; window[label] = new slider($(this)); console.log(window[label]); console.log(label); console.log(i) i++; }); $(".multi-nav a").click( function(e){ e.preventdefault(); number = $(this).parent().attr("class").split(" ").pop(); label = "label_" + number; console.log(label) console.log(window[label]); window[label].stop(); }); demo - http://codepen.io/jordandwhalen/pen/qjgnym
until add in animations toggling classes on targets of events stop interval:
function slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setinterval(function() { switch (self.i) { case 0: $(element).velocity({ translatex: "-33.3333%" }); $(".multi-nav a").velocity({ opacity: ".5" }); $(".multi-nav ." + self.i).velocity({ opacity: "1" }); self.i++; break; case 1: $(element).velocity({ translatex: "-66.6666%" }); $(".multi-nav a").velocity({ opacity: ".5" }); $(".multi-nav ." + self.i).velocity({ opacity: "1" }); self.i++; break; case 2: $(element).velocity({ translatex: "0%" }); $(".multi-nav a").velocity({ opacity: ".5" }); $(".multi-nav ." + self.i).velocity({ opacity: "1" }); self.i = 0; break; } }, 2000); } slider.prototype.stop = function() { window.clearinterval(this.timer); } var = 0; $(".multi").each( function(){ label = "label_" + i; window[label] = new slider($(this)); console.log(window[label]); console.log(label); console.log(i) i++; }); $(".multi-nav a").click( function(e){ e.preventdefault(); number = $(this).parent().attr("class").split(" ").pop(); label = "label_" + number; console.log(label) console.log(window[label]); window[label].stop(); });
looks issue animations being fired @ many matching elements. result, both intervals needed interrupted, before either stop animating.
var sliderid = 0; function slider(element) { this.id = sliderid; sliderid++; this.i = 0; this.element = element; var self = this; this.timer = window.setinterval(function() { switch (self.i) { case 0: $(element).velocity({ translatex: "-33.3333%" },{delay: 1500, duration: 500 }); $(".multi-nav." + self.id + " .active" ).removeclass("active"); $(".multi-nav." + self.id + " ." + self.i).addclass("active"); self.i++; break; case 1: $(element).velocity({ translatex: "-66.6666%" }, { delay: 1500, duration: 500 }); $(".multi-nav." + self.id + " .active" ).removeclass("active"); $(".multi-nav." + self.id + " ." + self.i ).addclass("active"); self.i++; break; case 2: $(element).velocity({ translatex: "0%" }, {delay: 1500, duration: 500 }); $(".multi-nav." + self.id + " .active" ).removeclass("active"); $(".multi-nav." + self.id + " ." + self.i ).addclass("active"); self.i = 0; break; } }, 2000); } adding in .id object, , utilizing within animations fixed issue!
Comments
Post a Comment