Can anyone shed some light?
I'm building a site that has a little ribbon at the top to fire off a mailto. When the ribbon is clicked, I want it to bounce. Trouble is, the mailto: fires at the same time and the bounce effect of the ribbon is missed because of the email client window appearing over the site.
Is there a way of delaying the mailto action with jQuery - or adding the mailto via jQuery?
I've got the below so far… I've prevented the default action and the bounce is working - i just need the last bit of firing the mailto again.
Thank you in advance…
$(document).ready(function() {
$( "a#pullTag" ).click(function( event ) {
event.preventDefault();
doBounce($(this), 3, '10px', 100);
});
function doBounce(element, times, distance, speed) {
for(i = 0; i < times; i++) {
element.animate({marginTop: '-='+distance},speed)
.animate({marginTop: '+='+distance},speed);
}
}
});
HTML is simply:
<a href="#" id="pullTag">Email Me</a>
You could do this :
$(document).ready(function () {
$("a#pullTag").click(function (event) {
event.preventDefault();
doBounce($(this), 3, '10px', 100);
});
function doBounce(element, times, distance, speed) {
for (i = 0; i < times; i++) {
element.animate({ marginTop: '-=' + distance }, speed)
/*
I have added a callback function to the last .animate()
This function checks the animation queue length
When the last animation is reached (queue length == 1),
it changes the current URL to the link's [href] attribute
*/
.animate({ marginTop: '+=' + distance }, speed, function() {
if (element.queue().length <= 1) {
window.location = element.prop('href');
}
});
}
}
});