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');
}

在jquery事件之后的链接之后

3 个答案: