使用 jquery 延迟 href 执行
Delay href execution with jquery
我正在尝试使用 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
谁能帮忙+
.work .item
元素 - 即处理程序内部的 this
是 <div>
,而不是 <a>
。要导航至 child <a>
,请执行以下操作:
var href = this.children[0].href;
或者如果您更喜欢 jQuery 语法
var href = $(this).children().attr('href');
我正在尝试使用 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
谁能帮忙+
.work .item
元素 - 即处理程序内部的 this
是 <div>
,而不是 <a>
。要导航至 child <a>
,请执行以下操作:
var href = this.children[0].href;
或者如果您更喜欢 jQuery 语法
var href = $(this).children().attr('href');