运行一个jQuery函数一个接一个完成效果

Question

我写了下面两个函数：

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });
});
</script>

第一个函数在某些图块上执行持续约 3 秒的过渡，即使我包含了 .promise 和 .done，第二个函数仍然会立即加载 html 页面，而不是等待effect/transition 完成。我正在考虑使用 setTimeinterval 让第二个函数等到第一个函数完成，但我不知道如何使用它来完成我想要的行为。

页面上的整个 CSS 转换

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.two {

    -webkit-animation-delay: 120ms; 
    animation-delay: 120ms;
}
.animated.three {
     -webkit-animation-delay: 320ms; 
    animation-delay: 320ms;
}
.animated.four {
      -webkit-animation-delay: 520ms; 
    animation-delay: 320ms;
}
.animated.five {
      -webkit-animation-delay: 720ms; 
    animation-delay: 720ms;
}
.animated.six {
     -webkit-animation-delay: 920ms; 
    animation-delay: 920ms;
}
.animated.seven {
      -webkit-animation-delay: 1020ms; 
    animation-delay: 1020ms;
}
.animated.eight {
      -webkit-animation-delay: 1220ms; 
    animation-delay: 1220ms;
}
.animated.nine {
      -webkit-animation-delay: 1620ms; 
    animation-delay: 1620ms;
}
.animated.ten {
      -webkit-animation-delay: 1820ms; 
    animation-delay: 1820ms;
}
.animated.eleven {
      -webkit-animation-delay: 2020ms; 
    animation-delay: 2020ms;
}
.animated.twelve {
      -webkit-animation-delay: 2220ms; 
    animation-delay: 2220ms;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}






/*CSS BIT FOR REVERSING THE ANIMATION ONCLICK EVENT 8*/


@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

Answer 1

如果 .tile 是 link，请将 return false 添加到 click 活动的末尾：

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });

    return false;
});
</script>

Answer 2

我不确定 jQueryUI addClass 方法是否支持承诺，但您可以使用回调。

另外，你还要防止点击事件的默认动作。

你所拥有的等价物是：

$('.tile').on('click', function (e) {
    e.preventDefault();

    $(".tile").addClass("flipOutX");
    $(".tile")[0].addEventListener("animationend", function() {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, false);
});

动画结束事件的文档：https://developer.mozilla.org/en-US/docs/Web/Events/animationend

可在 http://jqueryui.com/addClass/

找到 jQueryUI 添加 Class 的文档

这里有一些关于 return false; 和 event.preventDefault(); 之间差异的信息 https://css-tricks.com/return-false-and-prevent-default/

Answer 3

简单的 setTimeout 就可以完成这项工作。你可以试试这个

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, 1000);

});
</script>

Answer 4

更好，但更耗时：

将过渡动画移至 jQuery.animate()。您将拥有更多控制权。

例如：

var css = {'height': '100%', opacity: 1};
var options = {
  duration: 3000,
  complete: function() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  } 
};
$('.tile').on('click', function() {
  $(".tile").animate(css, options);
};

Answer 5

$('.tile').on('click', function () {
         $(".tile").addClass("flipOutX", 1000, load )
});

  function load() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  }

运行一个jQuery函数一个接一个完成效果

Run one jQuery function after another one finishes effect

javascript

jquery

timing