Skip to content

Instantly share code, notes, and snippets.

@joakin
Created October 4, 2012 14:37
Show Gist options
  • Save joakin/3833925 to your computer and use it in GitHub Desktop.
Save joakin/3833925 to your computer and use it in GitHub Desktop.
little js refactor
index 89cd18d..38e5379 100644
--- a/c:/Users/OLTRAJO/Desktop/js1.js
+++ b/c:/Users/OLTRAJO/Desktop/js2.js
@@ -1,12 +1,12 @@
- function setToggler(){
- $('.toggle-item').on('change', controlToggler);
+ function setToggler() {
- function controlToggler(){
- var toggleContainer = $(this).closest('.toggle-wrap');
- console.log(toggleContainer);
- $(".toggle-section:visible", toggleContainer).fadeOut(300);
- $(".toggle-section:hidden", toggleContainer).delay(300).fadeIn(300);
- }
+ var animationDuration = 300;
+ $('.toggle-item').on('change', function(event) {
+
+ var $sections = $(this).closest('.toggle-wrap').find('.toggle-section');
+ $sections.filter(':visible').fadeOut(animationDuration);
+ $sections.filter(':visible').delay(animationDuration).fadeIn(animationDuration);
+ });
}
--- a/c:/Users/OLTRAJO/Desktop/js1.js
+++ b/c:/Users/OLTRAJO/Desktop/js3.js
@@ -1,12 +1,18 @@
- function setToggler(){
- $('.toggle-item').on('change', controlToggler);
+ function setToggler() {
- function controlToggler(){
- var toggleContainer = $(this).closest('.toggle-wrap');
- console.log(toggleContainer);
- $(".toggle-section:visible", toggleContainer).fadeOut(300);
- $(".toggle-section:hidden", toggleContainer).delay(300).fadeIn(300);
- }
+ var animationDuration = 300;
+ $('.toggle-item').each(function(i, el) {
+
+ var $el = $(el),
+ $sections = $el.closest('.toggle-wrap').find('.toggle-section');
+
+ $el.on('change', function(event) {
+
+ $sections.filter(':visible').fadeOut(animationDuration);
+ $sections.filter(':visible').delay(animationDuration).fadeIn(animationDuration);
+ });
+ });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment