运行一个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 页面，而不是等待效果/过渡完成。我正在考虑使用 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

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

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

Answer 2

更好，但更耗时：

将过渡动画移动到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 3

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

Answer 4

我不确定 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

jQueryUI Add Class 的文档可以在 http://jqueryui.com/addClass/

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

Answer 5

如果

.tile是链接，请在click活动的末尾添加return false：

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