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

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

此外，您必须阻止点击事件的默认操作。

你所拥有的是等同于：

$('.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 Add Class的文档

以下是有关return false;和event.preventDefault(); https://css-tricks.com/return-false-and-prevent-default/

之间差异的一些信息

Answer 3

更好，但更耗时：

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

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

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

Answer 5

如果.tile是链接，请在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>

在另一个完成效果之后运行一个jQuery函数

5 个答案: