How to delay a hyperlink until a CSS animation ends?
Tags: jquery,css,jquery-animate,css-animations
Problem :
I'm trying to get the anchor tag to redirect as soon as the CSS animation ends. I tried capturing the href in jQuery and using 'setTimeout' to cause a delay before going to the anchor location (this is what was recommended in previous threads), but it hasn't been working.
$(document).ready(function() {
$('.section').click(function() {
var goTo = this.getAttribute("href"); //HOLDS HREF
var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN
{
$(this).removeClass('clicked');
});
var $elementB = $('.section').bind('animationend', function() {
$(this).removeClass('clicked');
});
$('.section').click(function() {
$(this).addClass('clicked'); //ANMATION END
});
setTimeout(function() { //SUPPOSED TO DELAY LINK
window.location = goTo;
}, 300);
});
});a {
overflow: hidden;
}
.section {
background-color: teal;
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}
.response {
position: relative;
top: 75px;
left: 80px;
width: 40px;
height: 40px;
border-radius: 500px;
background-color: #f5f5f5;
transition: .05s ease-out;
opacity: 0;
}
.clicked {
animation: event 1.4s;
}
.clicked > .response {
animation: response 1.6s;
}
@keyframes event {
0% {
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
}
20% {
box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
}
100% {
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
}
}
@keyframes response {
0% {}
16% {
opacity: .7;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(10);
}
100% {
opacity: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="section">
<div class="response"></div>
</a>Solution :
The issue is because the request is sent to load the new page immediately, hence the current UI is unloaded straight away with few further updates. To get around this you can stop the default behaviour of the link using preventDefault() and then make the request for the next page manually after the animation ends, like this:
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 300);
});
});a {
overflow: hidden;
}
.section {
background-color: teal;
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}
.response {
position: relative;
top: 75px;
left: 80px;
width: 40px;
height: 40px;
border-radius: 500px;
background-color: #f5f5f5;
transition: .05s ease-out;
opacity: 0;
}
.clicked {
animation: event 1.4s;
}
.clicked > .response {
animation: response 1.6s;
}
@keyframes event {
0% {
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
}
20% {
box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
}
100% {
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
}
}
@keyframes response {
0% {} 16% {
opacity: .7;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(10);
}
100% {
opacity: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="section">
<div class="response"></div>
</a>CSS Howto..
You can use the SASS join function to join two lists together, and then use that master list as the background value. For example: $columns: 12; .col-numbers { $output: ();...
.slide { display: inline-block; text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; } DEMO: https://jsbin.com/yekohi/1/edit?html,css,output...
You can achieve what you're trying to achieve quite easily without the hassle of creating another <div>. Currently, this is the code which generates the Donate button and the feature-me...
I would do something like this for the first half. And then for the second half, I would use some kind of media query to hide the nav and then...
Your question does not seem to fit your actual issue. Looking at your description and your web page, I understand your question as follows: "How do I keep a grid-type-arrangement...
use a mediaquery, for smaller resolutions, in which you hide the <br />, e.g. @media screen and (max-width: 600px) { br { display: none } } this will ensure a...
Here is a reference from css-tricks on how to create a corner ribbon using pseudo code. .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow:...
< and the like are not ASCII character codes, they're HTML entities. And to show them, it's quite simple: escape the & by writing & instead, so write &lt; to...
I'd go looking for sites with readymade layouts. A site like http://blog.html.it/layoutgala/ or such. There's also an question related to css layouts here. CSS layouts can be quite tricky to...
#picture { background-image:url('no-bullying.jpg'); height:100px; width:50px; position: absolute; bottom:10px; left:10px; } ...
Just fyi, by design you should add mfp-hide CSS class to element that should be hidden. Magnific Popup will automatically toggle it on open/close. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
Blockquote Two things are happening here. You are not using the container class properly. You are trying to override Bootstrap's CSS for the container class Bootstrap uses a grid...
Ok, a little embarrassed. I had my layers messed up to where my stylesheet wasn't being applied like I thought it was. So the correct way to change the menu-item's...
Are you hiring? I'll ask him the following questions If he knows padding, margin, hover ... and similar things that are small but important. I'll ask him if he can...
My assumption (from the first example link) is that instead of just having #sidebar stay in view, you want to have another element scroll with the window as well (i.e....
So I was able to contain them by placing a container on the blank div, called top. I think if I understand correctly you want each box to fill the...