在超链接单击时调用 Javascript 函数并等待动画完成?
Call Javascript Function on hyperlink click and wait for animation to finish?
我有一个与 css 一起使用的翻页过渡动画。它依赖于更改容器的 class 来启动 css 动画。我正在寻找一种激活此动画的方法(通过将 class 添加到容器中)然后等待它完成,然后转到 href 的 link。这里是
JSFiddle.
<div class="navigationbar">
<a href="home.html">
<h2 class="logo">The Lowdown.</h2>
</a>
<ul>
<li><a href="text.html">CONTACT US</a></li>
<li><a href="edition.html">EDITIONS</a></li>
<li><a href="articles.html">ARTICLES</a></li>
<li><a href="#aboutus">ABOUT US</a></li>
<li><a class="active" href="https:/google.com">HOME</a></li>
</ul>
</div>
<div class="loader loader--active">
<div class="loader__icon">
</div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
</div>
有什么办法吗?
你能试试下面的解决方案吗,如果它适合你的话
var el = document;
//el.onclick = showFoo;
$(document).ready(function(){
$(".jqLink").on("click",function(event){
var myRef=this;
console.log("ref=>",$(myRef).attr("href"));
showFoo(event);
setTimeout(function(){
$loader.classList.remove('loader--active');
setTimeout(function(){
window.location.href=$(myRef).attr("href");
},1000);
},2000);
});
})
function showFoo(e) {
$loader.classList.add('loader--active');
return e.preventDefault();
}
var $loader = document.querySelector('.loader')
window.onload = function() {
$loader.classList.remove('loader--active')
};
window.setTimeout(function () {
$loader.classList.remove('loader--active')
}, 2000)
将“jqLink”css class 添加到您的每个元素中,如下所示
<li><a href="text.html" class="jqLink">CONTACT US</a></li>
<li><a href="edition.html" class="jqLink">EDITIONS</a></li>
<li><a href="articles.html" class="jqLink">ARTICLES</a></li>
<li><a href="#aboutus" class="jqLink">ABOUT US</a></li>
<li><a class="active" href="https:/google.com" class="jqLink">HOME</a></li>
试试这个,如果它适合你。
我有一个与 css 一起使用的翻页过渡动画。它依赖于更改容器的 class 来启动 css 动画。我正在寻找一种激活此动画的方法(通过将 class 添加到容器中)然后等待它完成,然后转到 href 的 link。这里是 JSFiddle.
<div class="navigationbar">
<a href="home.html">
<h2 class="logo">The Lowdown.</h2>
</a>
<ul>
<li><a href="text.html">CONTACT US</a></li>
<li><a href="edition.html">EDITIONS</a></li>
<li><a href="articles.html">ARTICLES</a></li>
<li><a href="#aboutus">ABOUT US</a></li>
<li><a class="active" href="https:/google.com">HOME</a></li>
</ul>
</div>
<div class="loader loader--active">
<div class="loader__icon">
</div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
</div>
有什么办法吗?
你能试试下面的解决方案吗,如果它适合你的话
var el = document;
//el.onclick = showFoo;
$(document).ready(function(){
$(".jqLink").on("click",function(event){
var myRef=this;
console.log("ref=>",$(myRef).attr("href"));
showFoo(event);
setTimeout(function(){
$loader.classList.remove('loader--active');
setTimeout(function(){
window.location.href=$(myRef).attr("href");
},1000);
},2000);
});
})
function showFoo(e) {
$loader.classList.add('loader--active');
return e.preventDefault();
}
var $loader = document.querySelector('.loader')
window.onload = function() {
$loader.classList.remove('loader--active')
};
window.setTimeout(function () {
$loader.classList.remove('loader--active')
}, 2000)
将“jqLink”css class 添加到您的每个元素中,如下所示
<li><a href="text.html" class="jqLink">CONTACT US</a></li>
<li><a href="edition.html" class="jqLink">EDITIONS</a></li>
<li><a href="articles.html" class="jqLink">ARTICLES</a></li>
<li><a href="#aboutus" class="jqLink">ABOUT US</a></li>
<li><a class="active" href="https:/google.com" class="jqLink">HOME</a></li>
试试这个,如果它适合你。