Question

任何人都能解释一下吗？

我正在建立一个网站顶部有一个小带子来发射邮件。单击功能区时，我希望它反弹。麻烦的是，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

你可以这样做：

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

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

Answer 3

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

jQuery - 执行功能然后启动mailto

3 个答案: