如何在jQuery动画完成后执行.click（）？

我想单击一个链接后滑动一个div，然后滑动另一个div，然后进入下一页。
问题：在动画完成之前加载新页面。
问题：我该怎么做？
我应该使用preventDefault然后以某种方式恢复它吗？如何在jQuery动画完成后执行.click（）？

这是网址：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和浏览器导航问题。点击应该会导致进入下一页。

来源

2010-11-18 Hannemaatje

只是在更改页面之前制作动画而不会注意到用户将会非常困惑他恕我直言。无论如何，你可以做一个'preventDefault'，通过'.attr（“href”）'检索链接href，然后在你想要的所有动画之后进行重定向。但是，仍然，几乎不是一个好主意 – Shikiryu 2010-11-18 14:06:53

你可以做的一件事就是将你的整个动画过程包装在.animate()中，然后使用回调指向新的页面。动画完成时，会发生.animate（）下的回调。这应该给你你正在寻找的行为。

来源

2010-11-18 14:06:45

检查内嵌评论。简化初始选择。要加载新页面，请使用slideDown回调。

function slideUp(){ 
    allDivs.slideUp(500, slideDown); 
} 
function slideDown(){ 
    $("#introductie").slideDown(500, function() { 
     /* load the new page here */ 
    }); 
} 
$(function() { 
    //you can select multiple elements like this 
    var allDivs = $("#introductie, #agenda, #werk, #onderwijs-organisatie, #publicaties, #links, #contact"); 
    console.log(allDivs); 
    $("li.page-item-11 a").click(slideUp); 
});

来源

2010-11-18 14:10:16 jitter

返回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; 
});

（第一个回调没有按” t实际上必须是这样的内联函数，但其他人为了关闭clickedAnchor值。）

来源

2010-11-18 14:11:07 Phrogz

谢谢，Phrogz，这对我来说是诡计！ – Hannemaatje 2010-11-24 16:18:17

@Hannenmaatje不客气。如果您“接受”了答案（使绿色复选标记出现），您的感谢会更强烈。 :) – Phrogz 2010-11-24 17:51:17

非常感谢您的帮助！

我花了我一段时间才得到代码正确（有点...），因为当新页面尚未加载时没有多少内容可以下滑，所以我无法使用slideDown回调。

我现在有一个临时解决方案，它是：我使用if语句来确定我在哪个页面上，然后执行动画的第二部分slideDown部分。对于动画的第一部分，slideUp-part，我将'location.href'作为回调，并且在Phrogz展示的'return false'中。

像这样：

menuLinks.click(function() 
{ 
var clickedAnchor = this; 

      allDivs.slideUp(750); 
      mainDiv.fadeOut(500, function() 
      { 
       location.href = clickedAnchor.href; 
      }); 
return false;  
});

，然后重新加载页面（有的更多，如果语句遵循这一点，每一页）后：

if (currentLocation.substr(0,52) == introductiePage) 
    {  
     introductieMenu.css({color:"#FF844A"}); 
     introductieDiv.hide(); 
     mainDiv.hide(function() 
     { 
      mainDiv.fadeIn(750);   
      introductieDiv.slideDown(750); 
     });   
    }

现在我坚持，因为我必须找出实现从一个页面到另一个页面，从一个子页面到另一个子页面，从一个页面到另一个子页面等等之间的区别的方法。但是，这将是另一个线程。

来源

2010-11-24 16:33:22 Hannemaatje

如何在jQuery动画完成后执行.click（）？

回答

相关问题