我想在单击链接后向上滑动一个 div,然后向下滑动另一个 div,然后转到下一页。
问题:在动画完成之前加载新页面。
问题:我该怎么做?
我应该使用 PreventDefault 然后通过某种方式恢复它吗?
这是网址:http://www.jolandaschouten.nl/wordpress
这是代码,现在仅针对第一个菜单项实现:
jQuery(document).ready(function($){
var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");
console.log(allDivs);
$("li.page-item-11 a").click(slideUp);
function slideUp(){
allDivs.slideUp(500, slideDown);
}
function slideDown(){
$("#introductie").slideDown(500);
}
});
ps:我不想使用 AJAX,因为 SEO 和浏览器导航问题。单击实际上应该导致转到下一页。
最佳答案
返回false
以防止默认操作(跟随链接),使用闭包来锁定被单击的项目,然后手动跟随它:
$("li.page-item-11 a").click(function(){
var clickedAnchor = this;
allDivs.slideUp(500, function(){
$("#introductie").slideDown(500,function(){
location.href = clickedAnchor.href;
});
});
return false;
});
(第一个回调实际上不必是这样的内联函数文字,但其他回调必须是这样的,以便围绕 clickedAnchor
值关闭。)
关于jquery - jQuery 动画完成后如何执行 .click() ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4215524/