在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

问题是在showComplete的作用域之外声明了$self。

试着这样做：

$("#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');
}