2

我想在单击链接后向上滑动一个 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和浏览器导航问题。点击应该真正导致进入下一页。

4

4 回答 4

5

返回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值。）

于 2010-11-18T14:11:07.723 回答
1

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

于 2010-11-18T14:06:45.367 回答
0

非常感谢大家的帮助！

我花了一段时间才把代码弄好（有点……），因为当新页面还没有加载时，向下滑动的东西不多，所以我不能使用 slideDown 回调。

我现在有一个临时的解决方案是：我使用 if 语句来确定我在哪个页面上，然后做动画的后半部分，即 slideDown 部分。对于动画的第一部分，slideUp 部分，我将“location.href”作为回调，并使用“return false”作为 Phrogz 演示。

像这样：

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

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

然后，在页面重新加载之后（以及更多的 if 语句，每个页面一个）：

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

现在我被困住了，因为我必须找到一种方法来实现从一个页面到另一个页面、从一个子页面到另一个子页面、从一个页面到另一个子页面等之间的区别。但是那将是另一个线程。

于 2010-11-24T16:33:22.757 回答
0

检查内联注释。简化了初始选择。要加载新页面，请使用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-18T14:10:16.823 回答