I've built an image/content slider using JavaScript and as I've added to it and built in new functionality I've found myself writing several if statements in order to achieve the required response. I'm now going over it again and I want to refactor it to make it shorter (if possible) and to increase performance (again if possible). Has anyone any ideas on how I can refactor this? I'm thinking along the line of `switch` statements, but I'm not sure if that's the right route to go down or whether it would actually improve anything. /* * animate margin left and store current position */ slider.prototype.transition = function (position, offset) { //'use strict'; this.position = position; this.offset = offset; // update new slide position if deeplinking this.slide_pos = parseInt(this.position) || this.slide_pos; //check slide no exists in dl_urls object //this.deep_link_slide_no in window ? this.deep_link_slide_no = 0 : this.deep_link_slide_no = deep_link_slide_no; if (window.hasOwnProperty(this.deep_link_slide_no)) { this.deep_link_slide_no = 0; } else { this.deep_link_slide_no = position; } if(this.position === 0 || this.slide_pos === 0) { if(supportCSSTransitions && this.options.hardware_accelerated) { if(this.options.centered) { this.container.css({ 'margin-left': - (0.5 * this.slideWidth), transition : 'margin 0.8s ease' }); } else { this.container.css({ 'margin-left': this.offset || 0, transition : 'margin 0.8s ease' }); } } else { if(this.options.centered) { this.container.velocity({ 'margin-left': - (0.5 * this.slideWidth), }, { duration: this.options.slide_delay, easing: this.options.easing }); } else { this.container.velocity({ 'margin-left': this.offset || 0, }, { duration: this.options.slide_delay, easing: this.options.easing }); } } this.slide_pos = 0; } else { if(supportCSSTransitions && this.options.hardware_accelerated) { //console.log ("css and hardware"); if(this.options.centered) { this.container.css({ 'margin-left': - (this.slide_pos * this.slideWidth) - (0.5 * this.slideWidth), transition : 'margin 0.8s ease' }); } else if (typeof this.offset != "undefined") { this.container.css({ 'margin-left': (((this.slide_pos * this.slideWidth) * -1) + this.offset), transition : 'margin 0.8s ease' }); } else { this.container.css({ 'margin-left': ((this.slide_pos * this.slideWidth * -1)) || (this.current_margin + this.direction), transition : 'margin 0.8s ease' }); } } else { if(this.options.centered) { this.container.velocity({ 'margin-left': - (this.slide_pos * this.slideWidth) - (0.5 * this.slideWidth), }); } else if (typeof this.offset != "undefined") { this.container.velocity({ 'margin-left': (((this.slide_pos * this.slideWidth) * -1) + this.offset) }); } else { this.container.velocity({ 'margin-left': ((this.slide_pos * this.slideWidth * -1)) || (this.current_margin + this.direction) }); } } } // store and update margin each time this.current_margin = (this.current_margin + this.direction); // set button state this.set_button_state(); // set active states this.set_active_states(); };