javascript - jQuery 用动画改变图像并等待它触发超链接

Question

我想使用 url attr 在 .click() 上切换图像我可以这样做，但我不知道如何让它等待，直到动画完成重定向到新网页。 这是js

$(function() {
    $('.cv').click(function() {
        $("#cv img").fadeOut(2000, function() {
            $(this).load(function() {
                $(this).fadeIn();
            });
            $(this).attr("src", "images/cv2.png");
            return true;
        });
    });
}); 

这是 html:

<div id="cv" class="img one-third column">
  <a class="cv" target="#" href="cv.joanlascano.com.ar">
  <img src="images/cv1.png" alt="Curriculum"/>
  <br />CV</a>
</div>

Answer 1

您需要通过从点击处理程序返回 false 来防止浏览器默认跟随链接。然后在 fadeIn() 的回调中做重定向

$(function() {
    $('.cv').click(function() {
        /* store url*/
        var href = this.href;
        $("#cv img").fadeOut(2000, function() {
            /* bind load to image*/
            $(this).load(function() {
                $(this).fadeIn(function() {
                    /* redirect in callback of fadeIN*/
                    window.location = href;
                });
                /* change src*/
            }).attr("src", "images/cv2.png");
        });
        /* prevent browser default following href*/
        return false;
    });
});