GSAP Javascript if else语句问题

时间:2015-06-25 21:28:20

标签: javascript jquery html css gsap

我正在使用HTML,CSS和JS构建基本的在线银行应用程序。

到目前为止,我有最近的交易屏幕和一个简单的动画,用于打开每个交易的描述。

我使用GSAP创建动画,使用jQuery处理元素。

但是,在打开描述窗口后,我遇到了一个问题。

CODEPEN HERE,这是JS:

$(document).ready(function() {
  $('.list li').click(function() {

    var i = $(this).find('i');
    var li = $(this);
    var desc = $(this).next();
    var tl = new TimelineMax({paused:false});
    var open = false;

    if (open === true) {
      tl.to(i, .3, {rotation: 0})
        .to(li, .3, {borderBottom: 'none', delay: -.2})
        .to(desc, .3, {height: '0', padding: '0', delay: -.2});
      open = false;
    } else {
      tl.to(i, .3, {rotation: 90})
        .to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
        .to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
      open = true;
    }


  });


});

我使用if语句来决定播放哪个动画,具体取决于描述窗口是打开还是关闭。

我是一名学习编码的设计师,我会接受任何建议。

1 个答案:

答案 0 :(得分:1)

你有正确的想法,但var open = false;的范围是错误的。它的编写方式,open在每次调用单击处理程序时定义为false,您希望将它放在父作用域中:在单击处理程序之外,在调用单击处理程序之前。

编辑,因为您要跟踪每个元素的“打开”状态,您需要为每个元素创建一个闭包。您可以使用.each()执行此操作。

你可以这样做:

$(document).ready(function() {

  $('.list li').each(function() {

     var open = false;  // <-- Put "open" here

     $(this).click(function() {

        var i = $(this).find('i');
        var li = $(this);
        var desc = $(this).next();
        var tl = new TimelineMax({paused:false});
        // get rid of "open" here

       if (open === true) {
          tl.to(i, .3, {rotation: 0})
            .to(li, .3, {borderBottom: 'none', delay: -.2})
            .to(desc, .3, {height: '0', padding: '0', delay: -.2});
           open = false;
        } else {
           tl.to(i, .3, {rotation: 90})
             .to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
             .to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
           open = true;
        }


      });


    });
});