jquery - 在 jquery 事件之后跟随链接

Question

我有一个导航栏，一旦单击该项目，我就会制作动画。我想在导航完成后点击链接。

HTML：

<div id="project-nav">
    <ul> 
        <a href="" >
            <li class="project-3">1
                <ul> 
                    <li>WAIKANAE BEACH HOUSE</li>
                </ul>
            </li>
        </a>

        <a href="">
            <li class="project-4">2
                <ul> 
                    <li>WAITAHEKE WETLAND HOME</li>
                </ul>
            </li>
        </a>

        <a href="">
            <li class="project-1">3
                <ul> 
                    <li>WAIKANAE BEACH HOUSE</li>
                </ul>
            </li>
        </a>

脚本：

$("#project-nav a").click(function(ev) 
{
    ev.preventDefault();

    var $self=$(this);

    $(".project-1").animate( {"top": "+=-500px"}, 1200, function() { showComplete() } );
    $(".project-2").animate( {"top": "+=-500px"}, 1400, function() { showComplete() } );
    $(".project-3").animate( {"top": "+=-500px"}, 1000, function() { showComplete() } );
    $(".project-4").animate( {"top": "+=-500px"}, 1000, function() { showComplete() } );
    $(".project-5").animate( {"top": "+=-500px"}, 1000, function() { showComplete() } );
});

function showComplete()
{
    document.location = $self.attr('href');
}

这是我到目前为止所拥有的，动画有效，但它没有遵循链接。

Answer 1

问题被$self声明在showComplete.

试试这个：

$("#project-nav a").click(function(ev) {

    ev.preventDefault();
    var $self=$(this);

    $(".project-1").animate( {"top": "+=-500px"}, 1200, showComplete);
    $(".project-2").animate( {"top": "+=-500px"}, 1400, showComplete);
    $(".project-3").animate( {"top": "+=-500px"}, 1000, showComplete);
    $(".project-4").animate( {"top": "+=-500px"}, 1000, showComplete);
    $(".project-5").animate( {"top": "+=-500px"}, 1000, showComplete);

    function showComplete(){
        window.location = $self.attr('href');
    }
});

我所做的是showComplete在事件处理程序内部移动。

Answer 2

$self 超出showComplete().

您应该传递一个参数。

示例

$(".project-5").animate( {"top": "+=-500px"}, 1000, function() { showComplete($self.attr("href")) } );

function showComplete(pUrl){
    document.location = pUrl;
}

Answer 3

我的猜测$self是不确定的。它只存在于它创建的函数中。

你需要做： showComplete($self);

然后在函数创建中：

showComplete(el){
    document.location = el.attr('href');
}