jQuery - 做功能然后启动邮件

Question

谁能解释一下？

我正在构建一个顶部有一条小丝带的网站，用于启动 mailto。单击功能区时，我希望它弹跳。麻烦的是，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>

Answer 1

尝试使用（通过 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

Answer 2

你可以这样做：

$(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');
                        }
                    });
        }
    }
});

You can view a JSFiddle demo here

Answer 3

使用对最后一个动画函数的回调，您可以修改 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);
            }
        });
    }
});

在这里演示http://jsfiddle.net/hPWMw/1/