Delay href execution with jquery

Question

I am trying to create a small page transition with jQuery

I have this list of links

<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>

When ever a link is clicked, i would like to delay the link for a small animation to run, before it sends you to the page.

I use this jquery code to achieve it

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

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

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

It kinda works. It delays the link and runs the animation.

But i get an undefined url

Can anyone help+

Answer 1

The .work .item element - that is, the this inside the handler, is the <div>, not the <a>. To navigate to the child <a>, do:

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

Or if you prefer the jQuery syntax

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