任何人都能解释一下吗?
我正在建立一个网站顶部有一个小带子来发射邮件。单击功能区时,我希望它反弹。麻烦的是,mailto:同时触发,由于电子邮件客户端窗口出现在网站上,因此错过了功能区的弹跳效果。
有没有办法用jQuery延迟mailto操作 - 或者通过jQuery添加mailto?
到目前为止我已经得到了以下内容...我已经阻止了默认操作并且反弹正在运行 - 我只需要再次触发mailto。
提前谢谢你......
$(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就是:
<a href="#" id="pullTag">Email Me</a>
答案 0 :(得分:4)
你可以这样做:
$(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');
}
});
}
}
});
答案 1 :(得分:2)
使用最后一个动画功能的回调,你可以修改你的doBounce,以便在所有动画完成时调用。
使用Javascript:
$(document).ready(function () {
$("a#pullTag").click(function (event) {
event.preventDefault();
var href = $(this).attr('href');
doBounce($(this), 3, '10px', 1000, href);
});
function doBounce(element, times, distance, speed) {
element.animate({
marginTop: '-=' + distance
}, speed)
.animate({
marginTop: '+=' + distance
}, speed, 'swing', function () {
times = times - 1;
if (times === 0) {
console.log('animation complete, redirecting to href');
window.location.href = element.attr('href');
} else {
console.log('animation not yet complete');
doBounce(element, times, distance, speed);
}
});
}
});
答案 2 :(得分:0)
尝试使用(通过jQuery触发mailto事件):
window.location.href = "mailto:address@dmail.com";
所以在你的代码中它看起来像:
$(document).ready(function() {
$( "a#pullTag" ).click(function( event ) {
event.preventDefault();
doBounce($(this), 3, '10px', 100);
window.location.href = "mailto:address@dmail.com";
});
function doBounce(element, times, distance, speed) {
for(i = 0; i < times; i++) {
element.animate({marginTop: '-='+distance},speed)
.animate({marginTop: '+='+distance},speed);
}
}
});
<强> JSFiddle here 强>