Question

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

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

点击“.button：//点击”按钮展开按钮
将.intro的不透明度设为0 //隐藏视图中的文字
短暂延迟//暂停片刻，以便动画不会混合在一起
.sidebar的动画宽度为100％//水平展开div以使其填满整个宽度
fadeToggle .intro //从场景后面的页面中删除.intro文本
短暂延迟
toggleClass“展开”为.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);
}

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

1 个答案: