Выполнение последовательности анимации jquery - функция многократного использования

Question

У меня есть раздутая функция, которую я собрал вместе, которая работает в основном так, как хотелось бы в преднамеренной анимации расширяющегося div, который переключает контент и классы. Но я не знаю, как изменить его, чтобы одна и та же функция могла быть повторно использована, если на странице есть несколько экземпляров одного и того же элемента.

На простом английском вот что я делаю:

• на «нажмите» из .button: // пользователь нажимает на кнопку расширения
• анимировать непрозрачность .intro до 0 // скрыть вводный текст с точки зрения
• короткая задержка // пауза на мгновение, так что анимация не помять вместе
ширина
• анимировать от .sidebar до 100% // расширить DIV по горизонтали так, чтобы она заполняла всю ширину
• fadeToggle .intro// remove .intro text со страницы за сценой
• короткая задержка
• toggleClass «развернутом» в .sidebar // этот класс меняет фоновое изображение .button
• fadeToggle .Full // принести полное содержание
• анимировать непрозрачность .Full до 100 // вывести полный контент в поле зрения

Затем у меня есть другая функция, которая отменяет эти шаги, и я обернуваю их все в функцию, которая переключает их. Моя проблема заключается в том, что она добавляет классы ко всем элементам .sidebar в DOM, а не только к родителям.

function sidebarOut(el){ 
    $('.intro').animate({opacity: "0"}, 50); 
    setTimeout(function(){ 
     $('.sidebar').animate({width: "100%"}, 200); 
     $('.intro').fadeToggle(); 
      setTimeout(function(){ 
       $('.sidebar').toggleClass('expanded', 50, 'swing'); 
      },500); 
      setTimeout(function(){ 
       $('.full').fadeToggle(); 
      },500); 
     $('.full').animate({opacity: "100"}, 100); 
    },300); 
} 


function sidebarIn(el){ 
    $('.full').animate({opacity: "0"}, 50); 
    setTimeout(function(){ 
     $('.sidebar').animate({width: "30%"}, 200); 
     $('.full').fadeToggle(); 
      setTimeout(function(){ 
       $('.sidebar').toggleClass('expanded', 50, 'swing'); 
      },500); 
      setTimeout(function(){ 
       $('.intro').fadeToggle(); 
      },500); 
     $('.intro').animate({opacity: "100"}, 100); 
    },300); 
} 


$(".button").click(function() { 
    var el = this; 
    return (el.t = !el.t) ? sidebarOut(el) : sidebarIn(el); 
}); 

Вот разметка:

<aside class="sidebar"> 

    <div class="intro"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In felis enim, rutrum eget sagittis eu, tincidunt finibus felis. Curabitur vehicula risus augue, non viverra justo lacinia ut. Donec ut lobortis erat. </p> 
    </div> 

    <div class="full"> 
     <img src="" alt=""> 
     <h5>Expanded Content Here</h5> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In felis enim, rutrum eget sagittis eu, tincidunt finibus felis. Curabitur vehicula risus augue, non viverra justo lacinia ut. Donec ut lobortis erat. </p> 
     <hr> 
     <h5>More Content Here</h5> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In felis enim, rutrum eget sagittis eu, tincidunt finibus felis. Curabitur vehicula risus augue, non viverra justo lacinia ut. Donec ut lobortis erat. </p> 
    </div> 

    <a class="button">Go</a> 

</aside> 

Answer 1

Просто используйте прилагаемый элемент для целевого правильной врезки с помощью $(el).parents('.sidebar')

Кроме того, я не уверен, что вы делаете здесь:

return (el.t = !el.t) ? sidebarOut(el) : sidebarIn(el); 

с (el.t = !el.t) - операция присвоения, это будет сегда приравнять к true

Вы, возможно, намеревался сделать операцию сравнения: (el.t == !el.t) но всегда будет возвращать ложь так снова, не является полезным условием

Во всяком случае, для функций что-то, как это должно работать:

function sidebarOut(el){ 

    var sidebar = $(el).parents('.sidebar'); 
    var intro = sidebar.find('.intro'); 
    var full = sidebar.find('.full'); 

    intro.animate({opacity: "0"}, 50); 

    setTimeout(function(){ 

     sidebar.animate({width: "100%"}, 200); 

     intro.fadeToggle(); 
      setTimeout(function(){ 
       sidebar.toggleClass('expanded', 50, 'swing'); 
      },500); 
      setTimeout(function(){ 
       full.fadeToggle(); 
      },500); 
     full.animate({opacity: "100"}, 100); 

    },300); 
} 


function sidebarIn(el){ 

    var sidebar = $(el).parents('.sidebar'); 
    var intro = sidebar.find('.intro'); 
    var full = sidebar.find('.full'); 

    full.animate({opacity: "0"}, 50); 

    setTimeout(function(){ 

     sidebar.animate({width: "30%"}, 200); 

     full.fadeToggle(); 
      setTimeout(function(){ 
       sidebar.toggleClass('expanded', 50, 'swing'); 
      },500); 
      setTimeout(function(){ 
       intro.fadeToggle(); 
      },500); 
     intro.animate({opacity: "100"}, 100); 
    },300); 
}