使 jquery 动画序列成为可重用的函数

Question

我有一个臃肿的函数，我将它拼凑在一起，主要是在一个扩展 div 的故意动画中工作，它可以切换内容和类。但是我不知道如何修改它，以便在页面上有相同元素的多个实例时可以重复使用相同的功能。

简单地说，这就是我正在做的事情：

• “点击”按钮：//用户点击展开按钮
• 将 .intro 的不透明度设置为 0 // 隐藏介绍文本
• 短暂的延迟 // 暂停片刻，以免动画混在一起
• 将 .sidebar 的宽度设置为 100% // 水平扩展 div 使其填满整个宽度
• fadeToggle .intro // 从幕后页面中移除 .intro 文本
• 短暂的延迟
• toggleClass "expanded" to .sidebar // 这个类改变了.button的背景图片
• fadeToggle .full // 引入完整内容
• 将 .full 的不透明度设置为 100 // 将全部内容淡入视图

然后我有另一个函数可以反转这些步骤，我将它们全部包装到一个可以切换它们的函数中。我的问题似乎是它正在向 DOM 中的所有 .sidebar 元素添加类，而不仅仅是父元素。

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)，但这总是会再次返回 false，所以不是有用的条件

无论如何，对于您的功能，这样的东西应该可以工作：

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);
}