使用 jquery 延迟 href 执行

Question

我正在尝试使用 jQuery

创建一个小页面转换

我有 link

的列表

<div class="work">
    <div class="item" data-fx="5">
        <a href="project-page.html" data-img="assets/testimage.png"><span>Ude bag November Vej</span></a>
    </div>
    <div class="item" data-fx="5">
        <a href="project-page.html" data-img="assets/testimage.png"><span>Rabbit</span></a>
    </div>
    <div class="item" data-fx="5">
        <a href="" data-img="assets/testimage.png"><span>Camouflage no. 1</span></a>
    </div>
</div>
<div class="page-transition-out"></div>

每当单击 link 时，我想在将您发送到页面之前将小动画的 link 延迟到运行。

我用这个jquery代码来实现

$(".work .item").click(function() {
    $(".page-transition-out").css("height","100vh");

    var href = $(this).attr('href');

    setTimeout(function() {window.location = href}, 2000);
    return false;
});

有点效果。它会延迟 link 和运行动画。

但是我得到一个 undefined url

谁能帮忙+

Answer 1

.work .item 元素 - 即处理程序内部的 this 是 <div>，而不是 <a>。要导航至 child <a>，请执行以下操作：

var href = this.children[0].href;

或者如果您更喜欢 jQuery 语法

var href = $(this).children().attr('href');

使用 jquery 延迟 href 执行

Delay href execution with jquery

jquery

href

transition

delay

location-href