Question

我搜索了类似的问题，但没有一个解决方案没有帮助我。

所以，这是我的问题，我在我的标题中有一些其他页面的链接（关于，porftiolio等...），当点击<a>元素时，我在javascript中有一个动画。但我的页面转换是即时的，因此无法看到动画。那么我应该做些什么来阻止页面过渡几秒钟直到我的动画结束。这是一个示例： http://codepen.io/anon/pen/zrXrXM。在我的动画结束之前，有人可以帮助我做什么来停止过渡。

Answer 1

preventDefault停止重定向，然后更改动画window.location上的complete。

$("a").click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $(".header").slideUp("slow", function(){
      window.location = href; 
    });
});

Updated CodePen

Answer 2

您可以使用.outer { position: relative; } .outer.loading:before { background: #fefefe url('https://www.wpfaster.org/wp-content/uploads/2013/06/loading-gif.gif') center no-repeat; background-size: contain; content: ""; display: inline-block; position: absolute; width: 100%; height: 100%; z-index: 9999; }功能看这里：http://codepen.io/SitePoint/pen/Ejxvjr 在这里解释：http://www.sitepoint.com/jquery-settimeout-function-examples/

单击链接后的页面转换延迟（动画结束后）

2 个答案: