Question

我一直在使用Animate.CSS和基本的Jquery来为屏幕上和屏幕外的元素设置动画。问题是由于在屏幕动画的同时发生背景幻灯片，这已经造成了很多延迟。我一直在寻找替代方案来帮助解决这个问题。

我已经阅读过使用Opacity和TranslateZ等来让页面进出页面。

在动画期间，将下面的代码更改为可能滞后的最佳方法是什么？

 //Screen 7 Start 
//Highest Planned College
$( "#screen7" ).hide()

$(".buttonsQuestion7").click(function() {
$('#screen7').addClass('animated slideOutUp');
$('#screen7').fadeOut()
$( "#screen8" ).show()
$( "#screen8" ).addClass('animated slideInUp');


});

Answer 1

我也有jQuery动画的滞后问题。问题在于像你一样拥有几个动画：

$('#screen7').fadeOut();
$( "#screen8" ).show();

为我修复的是在第一个动画的回调中调用第二个动画：

$('#screen7').effect('fadeOut', {
    direction: 'left', 
    mode: 'hide', 
    duration: '300',
    complete: function(){

        $('#screen8').show();
    }
});

在这种情况下，我使用jQuery UI中的.effect()，但.fadeOut()具有相同的complete回调选项

http://api.jquery.com/fadeout/

希望有所帮助

屏幕上的动画对象没有延迟

1 个答案: