使用jquery延迟href执行

Question

我正试图用jQuery 创建一个小页面转换

我有这个链接列表

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

当一个链接被点击时，我想在它将你发送到页面之前，延迟链接以运行一个小动画。

我使用这个jquery代码来实现它

$(".work .item").click(function() {
$(".page-transition-out").css("height","100vh");
var href = $(this).attr('href');
setTimeout(function() {window.location = href}, 2000);
return false;
});

这有点奏效。它会延迟链接并运行动画。

但我得到了一个未定义url

有人能帮忙吗+

Answer 1

.work .item元素(即处理程序中的this(是<div>，而不是<a>。要导航到子<a>，请执行以下操作：

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

或者，如果您喜欢jQuery语法

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